简体   繁体   English

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

[英]Change background Color of a div once you click an li item

I need your expertise and help again, What i'm trying to do is when you click the List item below it will get the background color from the span and apply/change the color on the main div every time the user clicks on the list item我再次需要您的专业知识和帮助,我要做的是当您单击下面的列表项时,它将从跨度中获取背景颜色,并在每次用户单击列表时应用/更改主 div 上的颜色物品

Note: the list item is not only two item it can be more.注意:列表项不仅是两项,还可以更多。

HTML: 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>

Main HTML that will change the background color once you've click the list item主 HTML 单击列表项后将更改背景颜色

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

JS that i got我得到的 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);
});

You can simply use a click function to check which li > span was clicked and get its color and apply that color to your div您只需click function 即可检查单击了哪个li > span并获取其color并将该颜色应用于您的div

This will work with multiple li's if you have them (I have added few different li with different color for demo purposes)如果您有多个li's ,这将适用于它们(出于demo目的,我添加了几个不同颜色的不同li

Live Demo:现场演示:

 $(".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>

js: js:

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

css: css:

.redBg{
background-color: red;
}

One possible solution could be to surround the section you want to change in a.Using a JS event, you can write a function that will be executed every time your is clicked on.一种可能的解决方案可能是将要更改的部分包围在 a 中。使用 JS 事件,您可以编写一个 function ,每次单击时都会执行它。 Here is a link going into more detail about the "onclick" event.这是一个链接,其中包含有关“onclick”事件的更多详细信息。 I want to emphasize "onclick" executes a function, so make sure to use parentheses when calling the function by name (ex: myFunction()).我想强调“onclick”执行的是 function,因此在按名称调用 function 时请确保使用括号(例如:myFunction())。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM