Question

我有一个问题，我想添加一个Click事件并将一个类添加到当前的“单击”幻灯片中。但是我想添加该类，但是当您单击另一种重置活动的并为下一个选定的幻灯片添加活动状态时？但这不起作用。

由于某种原因...它将在每次点击时添加类，但不会将其删除。

我尝试将其与等于currentIndex的值进行比较，但无法正常工作。

有什么主意吗？

(() => {
    const dataPictures = document.querySelectorAll('.content--wrap');
    const imgWrap = document.querySelector('.imgwrap');

    dataPictures.forEach((picture, index) => {
        const currentIndex = index + 1;

        picture.addEventListener('click', () => {
            if(picture) {
                imgWrap.classList.add(`content--${currentIndex}`);
            } else {
                imgWrap.classList.remove(`content--${currentIndex}`);
            }
        });

        // picture.addEventListener('mouseleave', () => {
        //     imgWrap.classList.remove(`content--${currentIndex}`);
        // });
    });
})();

Answer 1

请查看此示例，希望对您有所帮助：

$(".item").click(function() {
  
  $(".item").removeClass('active');
  $(this).addClass("active");
  
});

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li{
  margin: 5px 0;
  padding: 5px;
  box-shadow: 2px 1px 3px rgba(0,0,0,.2);
  cursor: pointer;
  text-transform: capitalize;
}

li.active {
  color: white;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul>
  <li class="item active" value="1"> first </li>
  <li class="item"> second </li>
  <li class="item"> third </li>
  <li class="item"> fourth </li>
</ul>

单击每张幻灯片时如何删除活动班级？

1 个答案: