切换活动类 - jQuery

Question

想要将活动类添加到选定的 div。目前我无法让它在取消选择时删除活动类

var item = $('.item').click(function() {

  item.removeClass('active');

  $(this).addClass('active');

});

$(".item").on("click", function(e) {

  //get curent description

  let $desc = $(this).next(".desc");

  // hide all other description execpt current

  $(".desc").not($desc).hide();

  // show or hide current description

  $desc.css("display") == "none" ? $desc.show() : $desc.hide();

})

.container {

  width: 95%;

  margin: auto;

  display: grid;

  grid-template-columns: repeat(8, 1fr);

  grid-auto-flow: row dense;

  grid-gap: 0.5em;

}

.item,

.desc {

  border: 1px solid grey;

  height: 100px;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 20px;

}

.desc {

  display: none;

  grid-column: 1 / -1;

}

.active {

  background: rgba(100, 100, 100, 0.7);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

  <div class="item">1</div>

  <div class="desc">Description 1</div>

  <div class="item">2</div>

  <div class="desc">Description 2</div>

  <div class="item">3</div>

  <div class="desc">Description 3</div>

  <div class="item">4</div>

  <div class="desc">Description 4</div>

  <div class="item">5</div>

  <div class="desc">Description 5</div>

  <div class="item">6</div>

  <div class="desc">Description 6</div>

</div>

我想将活动类添加到选定的描述框中 - 即使我将其添加到函数中以切换描述，我也无法正确删除活动类

Answer 1

var $items = $('.item').on('click', function(e) {&nbsp; $(e.target).toggleClass('active');&nbsp; $items.filter('.active').not(e.target).removeClass('active');&nbsp;&nbsp;&nbsp; //get curent description&nbsp; let $desc = $(e.target).next(".desc");&nbsp;&nbsp;&nbsp; // hide all other description execpt current&nbsp; $(".desc").not($desc).hide();&nbsp;&nbsp;&nbsp; // show or hide current description&nbsp; $desc.toggle();});.container {&nbsp; width: 95%;&nbsp; margin: auto;&nbsp; display: grid;&nbsp; grid-template-columns: repeat(8, 1fr);&nbsp; grid-auto-flow: row dense;&nbsp; grid-gap: 0.5em;}.item,.desc {&nbsp; border: 1px solid grey;&nbsp; height: 100px;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; font-size: 20px;}.desc {&nbsp; display: none;&nbsp; grid-column: 1 / -1;}.active {&nbsp; background: rgba(100, 100, 100, 0.7);}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container">&nbsp; <div class="item">1</div>&nbsp; <div class="desc">Description 1</div>&nbsp; <div class="item">2</div>&nbsp; <div class="desc">Description 2</div>&nbsp; <div class="item">3</div>&nbsp; <div class="desc">Description 3</div>&nbsp; <div class="item">4</div>&nbsp; <div class="desc">Description 4</div>&nbsp; <div class="item">5</div>&nbsp; <div class="desc">Description 5</div>&nbsp; <div class="item">6</div>&nbsp; <div class="desc">Description 6</div></div>

Answer 2

接下来试试：var item = $('.item');var desc = $('.desc');item.on("click", function(e) {&nbsp; item.removeClass('active');&nbsp; desc.removeClass('active');&nbsp; $(this).addClass('active');&nbsp; $(this).next('.desc').addClass('active');}).container {&nbsp; width: 95%;&nbsp; margin: auto;&nbsp; display: grid;&nbsp; grid-template-columns: repeat(8, 1fr);&nbsp; grid-auto-flow: row dense;&nbsp; grid-gap: 0.5em;}.item,.desc {&nbsp; border: 1px solid grey;&nbsp; height: 100px;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; font-size: 20px;}.desc {&nbsp; display: none;&nbsp; grid-column: 1 / -1;}.desc.active {&nbsp; display: block;}.active {&nbsp; background: rgba(100, 100, 100, 0.7);}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><div class="container">&nbsp; &nbsp; &nbsp; <div class="item">1</div>&nbsp; &nbsp; &nbsp; <div class="desc">Description 1</div>&nbsp; &nbsp; &nbsp; <div class="item">2</div>&nbsp; &nbsp; &nbsp; <div class="desc">Description 2</div>&nbsp; &nbsp; &nbsp; <div class="item">3</div>&nbsp; &nbsp; &nbsp; <div class="desc">Description 3</div>&nbsp; &nbsp; &nbsp; <div class="item">4</div>&nbsp; &nbsp; &nbsp; <div class="desc">Description 4</div>&nbsp; &nbsp; &nbsp; <div class="item">5</div>&nbsp; &nbsp; &nbsp; <div class="desc">Description 5</div>&nbsp; &nbsp; &nbsp; <div class="item">6</div>&nbsp; &nbsp; &nbsp; <div class="desc">Description 6</div></div>

Answer 3

与您处理描述字段的方式类似。从所有其他项目中删除类，并切换所选项目的类。您也可以使用该.toggle()函数而不是检查 CSS 来获取描述。var item = $('.item').click(function() {&nbsp; item.not(this).removeClass('active');&nbsp; $(this).toggleClass('active');});$(".item").on("click", function(e) {&nbsp; //get curent description&nbsp; let $desc = $(this).next(".desc");&nbsp; // hide all other description execpt current&nbsp; $(".desc").not($desc).hide();&nbsp; // show or hide current description&nbsp; $desc.toggle();}).container {&nbsp; width: 95%;&nbsp; margin: auto;&nbsp; display: grid;&nbsp; grid-template-columns: repeat(8, 1fr);&nbsp; grid-auto-flow: row dense;&nbsp; grid-gap: 0.5em;}.item,.desc {&nbsp; border: 1px solid grey;&nbsp; height: 100px;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; font-size: 20px;}.desc {&nbsp; display: none;&nbsp; grid-column: 1 / -1;}.active {&nbsp; background: rgba(100, 100, 100, 0.7);}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container">&nbsp; <div class="item">1</div>&nbsp; <div class="desc">Description 1</div>&nbsp; <div class="item">2</div>&nbsp; <div class="desc">Description 2</div>&nbsp; <div class="item">3</div>&nbsp; <div class="desc">Description 3</div>&nbsp; <div class="item">4</div>&nbsp; <div class="desc">Description 4</div>&nbsp; <div class="item">5</div>&nbsp; <div class="desc">Description 5</div>&nbsp; <div class="item">6</div>&nbsp; <div class="desc">Description 6</div></div>