动态改变卡片的背景

Question

我不知道JavaScript，但我想用这个功能改变几张卡片的背景颜色

function SetColorRed() {
  document.getElementById("SettingCard").style.background = "red";
}
function SetColorBlue() {
  document.getElementById("SettingCard").style.background = "blue";
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="container-fluid">

    <div class="row mt-3">
      <!-- Card -->
      <div class="SettingCard" id="SettingCard">
        <div class="dropdown col-sm">
          <a class="dsh253" href="#" role="button" id="SetColorCardBG" data-bs-toggle="dropdown" aria-expanded="false">
            BackgroundColor
          </a>

          <ul class="dropdown-menu dsh250" aria-labelledby="SetColorCardBG">
            <div class="dshcd250">
              <li><a class="dropdown-item" onclick="SetColorRed();">Red</a></li>
              <li><a class="dropdown-item" onclick="SetColorBlue();">Blue</a></li>
            </div>
          </ul>
        </div>
        <h4><b>02 / Einteilung MA Arbeitsgruppe / Wohnung</b></h4>
        <p>Einteilung der gleichen MA-Arbeitsgruppen in die gleichen <i>Wohnungen</i> / Häuser 2022-06- 27 in Arbeit</p>
      </div>
      <!-- end card -->
      <!-- ---------------------------------------------------------- -->
      <!-- Card -->
      <div class="SettingCard" id="SettingCard">
        <div class="dropdown col-sm">
          <a class="dsh253" href="#" role="button" id="SetColorCardBG" data-bs-toggle="dropdown" aria-expanded="false">
            BackgroundColor
          </a>

          <ul class="dropdown-menu dsh250" aria-labelledby="SetColorCardBG">
            <div class="dshcd250">
              <li><a class="dropdown-item" onclick="SetColorRed();">Red</a></li>
              <li><a class="dropdown-item" onclick="SetColorBlue();">Blue</a></li>
            </div>
          </ul>
        </div>
        <h4><b>02 / Einteilung MA Arbeitsgruppe / Wohnung</b></h4>
        <p>Einteilung der gleichen MA-Arbeitsgruppen in die gleichen <i>Wohnungen</i> / Häuser 2022-06- 27 in Arbeit</p>
      </div>
      <!-- end Card -->
    </div>
  </div>
</div>

我添加了来自phpMyAdmin的卡片，我想让每张卡片都有改变背景颜色的功能，用BackgroundColor按钮，背景颜色只改变到第一张卡片，有没有一种方法可以让 javascript 代码适用于我在上面代码中介绍的所有卡片？

Answer 1

所有卡 ID 都必须是唯一的，因此您可以将 javascript 更改为：

function SetColorRed(index) {
  document.getElementById("SettingCard-" + index).style.background = "red";
}
function SetColorBlue(index) {
  document.getElementById("SettingCard-" + index).style.background = "blue";
}

然后当您从数据库中提取卡片时，在 id 中为它们添加一个索引，每个卡片都会增加，因此每张卡片的 ID 现在为：id="SettingCard-1" id="SettingCard-2"等

当您随后调用您的函数时，您将传递卡片上的相同索引：onclick="SetColorBlue(index);"

如果您需要任何进一步的说明，请告诉我。

Answer 2

您需要除 ID 之外的其他选择器，因为 ID 需要是唯一的

这里是委托版本

window.addEventListener('DOMContentLoaded', function() {
  document.querySelector('.container').addEventListener('click', function(e) {
    const tgt = e.target.closest('a');
    if (tgt && tgt.matches('.dropdown-item')) { 
      tgt.closest('.SettingCard').style.background = tgt.textContent.trim().toLowerCase()
    }
  })
})

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="container-fluid">

    <div class="row mt-3">
      <!-- Card -->
      <div class="SettingCard">
        <div class="dropdown col-sm">
          <a class="dsh253" href="#" role="button" id="SetColorCardBG" data-bs-toggle="dropdown" aria-expanded="false">
            BackgroundColor
          </a>
          <ul class="dropdown-menu dsh250" aria-labelledby="SetColorCardBG">
            <div class="dshcd250">
              <li><a class="dropdown-item">Red</a></li>
              <li><a class="dropdown-item">Blue</a></li>
            </div>
          </ul>
        </div>
        <h4><b>02 / Einteilung MA Arbeitsgruppe / Wohnung</b></h4>
        <p>Einteilung der gleichen MA-Arbeitsgruppen in die gleichen <i>Wohnungen</i> / Häuser 2022-06- 27 in Arbeit</p>
      </div>
      <!-- end card -->
      <!-- ---------------------------------------------------------- -->
      <!-- Card -->
      <div class="SettingCard">
        <div class="dropdown col-sm">
          <a class="dsh253" href="#" role="button" id="SetColorCardBG" data-bs-toggle="dropdown" aria-expanded="false">
            BackgroundColor
          </a>

          <ul class="dropdown-menu dsh250" aria-labelledby="SetColorCardBG">
            <div class="dshcd250">
              <li><a class="dropdown-item">Red</a></li>
              <li><a class="dropdown-item">Blue</a></li>
            </div>
          </ul>
        </div>
        <h4><b>02 / Einteilung MA Arbeitsgruppe / Wohnung</b></h4>
        <p>Einteilung der gleichen MA-Arbeitsgruppen in die gleichen <i>Wohnungen</i> / Häuser 2022-06- 27 in Arbeit</p>
      </div>
      <!-- end Card -->
    </div>
  </div>
</div>

动态改变卡片的背景

Dynamically change the background of a cards

html

javascript

css

bootstrap-5