单击 li 项目后更改 div 的背景颜色

Question

我再次需要您的专业知识和帮助，我要做的是当您单击下面的列表项时，它将从跨度中获取背景颜色，并在每次用户单击列表时应用/更改主 div 上的颜色物品

注意：列表项不仅是两项，还可以更多。

HTML：

    <li class="variable-item color-variable-item" title="Black" data-value="black">
        <span class="variable-item-span variable-item-span-color" style="background-color:#000000;"></span>
   </li>
    <li class="variable-item color-variable-ite" title="Red" data-value="red">
        <span class="variable-item-span variable-item-span-color" style="background-color:#dd3333;"></span>
    </li>

主 HTML 单击列表项后将更改背景颜色

<div class="slick-list"></div>

我得到的 JS

$("li.variable-item.color-variable-item span").each(function(index, value) {
  var colorjg = $( this ).css( "background-color" );
  $(".slick-list.draggable").css('background-color', colorjg);
});

Answer 1

您只需click function 即可检查单击了哪个li > span并获取其color并将该颜色应用于您的div

如果您有多个li's ，这将适用于它们（出于demo目的，我添加了几个不同颜色的不同li ）

现场演示：

 $(".variable-item > span").click(function() { var colorjg = $(this).css("background-color"); //get the bg color $(".slick-list").css('background-color', colorjg); //apply the bg color });

 li span { cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li class="variable-item color-variable-item" title="Black" data-value="black"> <span class="variable-item-span variable-item-span-color" style="background-color:blue;">Click me</span> </li> <li class="variable-item color-variable-ite" title="Red" data-value="red"> <span class="variable-item-span variable-item-span-color" style="background-color:yellow;">Click me</span> </li> <li class="variable-item color-variable-ite" title="Red" data-value="red"> <span class="variable-item-span variable-item-span-color" style="background-color:red;">Click me</span> </li> <li class="variable-item color-variable-ite" title="Red" data-value="red"> <span class="variable-item-span variable-item-span-color" style="background-color:green;">Click me</span> </li> <br> <br> <div class="slick-list">dsds</div>

Answer 2

js：

    let liEl = document.querySelectorAll('.variable-item');
    let divEl = document.querySelector(.slick-list'');
    liEl.forEach((el) => {
      el.addEventListener('click', () => {
        divEl.classList.add('redBg');
      });
    });

css：

.redBg{
background-color: red;
}

Answer 3

一种可能的解决方案可能是将要更改的部分包围在 a 中。使用 JS 事件，您可以编写一个 function ，每次单击时都会执行它。 这是一个链接，其中包含有关“onclick”事件的更多详细信息。 我想强调“onclick”执行的是 function，因此在按名称调用 function 时请确保使用括号（例如：myFunction()）。