Измените цвет фона div, как только вы нажмете элемент li

Мне снова нужен ваш опыт и помощь. Что я пытаюсь сделать, так это когда вы нажимаете элемент списка ниже, он получает цвет фона из диапазона и применяет/меняет цвет в главном 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);
});

javascript html jquery
person Community    schedule 18.08.2020    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете просто использовать функцию click, чтобы проверить, какой li › span был нажат, получить его color и применить этот цвет к вашему div.

Это будет работать с несколькими li's, если они у вас есть (я добавил несколько разных li с разными цветами для 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>

person Always Helping    schedule 18.08.2020

arrow_upward
0
arrow_downward

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;
}
person ehsan    schedule 18.08.2020

arrow_upward
-1
arrow_downward

Одним из возможных решений может быть окружение раздела, который вы хотите изменить, в . Используя событие JS, вы можете написать функцию, которая будет выполняться каждый раз, когда вы нажимаете на нее. Вот ссылка, в которой более подробно рассказывается о событии onclick. Я хочу подчеркнуть, что onclick выполняет функцию, поэтому обязательно используйте круглые скобки при вызове функции по имени (например, myFunction()).

person Riley Simpson    schedule 18.08.2020