切换活动类 - jQuery答案

【问题标题】：Toggle an active class - jQuery切换活动类 - jQuery
【发布时间】：2019-10-07 20:47:39
【问题描述】：

想要将活动类添加到选定的 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>

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

【问题讨论】：

它似乎在 sn-p 中工作。
请注意 $('.item').click(function () {... 和 $('.item').on('click', function(e) {... 都做同样的事情...
@Barmar 如果您进行选择然后再次单击它，OP 想要删除该类以取消选择它
我自己就用toggleClass...

标签： javascript jquery

【解决方案1】：

要做到这一点，您需要从列表中排除单击的项目以从中删除活动类用这个

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

或者如果没有其他元素带有数字框，你也可以使用兄弟

    $(this).siblings().removeClass('active');

哪一种感觉更好

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

【讨论】：

【解决方案2】：

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

您也可以使用 .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>

【讨论】：

【解决方案3】：

尝试下一个：

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>

【讨论】：

【解决方案4】：

就个人而言，我会将逻辑浓缩为单个事件处理程序。您可以在首先单击的元素上切换类以添加/删除活动。然后，您可以过滤所有项目以找到活动项目，即不是刚刚单击的项目，如果单击的项目刚刚标记为活动项目，则将其从其他项目中删除。

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>

【讨论】：

【解决方案5】：

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>

【讨论】：