單擊 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()）。