Переключить активный класс - 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 $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 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>

Answer 4

Попробуйте следующее:

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 5

для этого Вам нужно исключить выбранный элемент из списка, чтобы исключить использование активного класса

  $('.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>