切换活动类 - 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) {

  $(e.target).toggleClass('active');

  $items.filter('.active').not(e.target).removeClass('active');

  

  //get curent description

  let $desc = $(e.target).next(".desc");

  

  // hide all other description execpt current

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

  

  // show or hide current description

  $desc.toggle();

});

.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 2

接下来试试：

var item = $('.item');

var desc = $('.desc');

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

  item.removeClass('active');

  desc.removeClass('active');

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

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

})

.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;

}

.desc.active {

  display: block;

}

.active {

  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">

      <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 3

与您处理描述字段的方式类似。从所有其他项目中删除类，并切换所选项目的类。

您也可以使用该.toggle()函数而不是检查 CSS 来获取描述。

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

  item.not(this).removeClass('active');

  $(this).toggleClass('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.toggle();

})

.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>