Как удалить класс для блока при повторном нажатии на него?

#javascript #jquery

Здравствуйте! Есть блоки (у каждого свой id), при нажатии на которые добавляется
к ним соответствующий класс. Нажали на блок №1, к нему добавился класс. Нажали на блок
№2, к нему добавился класс, при этом у блока №1 класс удалился. Это всё верно. Но необходимо,
чтобы и при повторном нажатии на блок, у блока удалялся класс, т.е. нажали на блок
№1, класс добавился, нажали повторно - класс удалился. Помогите, пожалуйста.

$(document).ready(function(){
    $('.map-marker').on('click', function() {
        var $me = $(this);
        var id = $me.data("id");

    var $tab = $('.map-marker[data-id=' + id + ']');
    var $tabBody = $('.map-bubble[data-id = ' + id + '-content]');

        $('.map-marker').removeClass('is-open');
        $('.map-marker[data-id=' + id + ']').addClass('is-open');

        $('.map-bubble').removeClass('is-visible');
        $('.map-bubble[data-id = ' + id + '-content]').addClass('is-visible');

    });
});

    

Ответы

Ответ 1

В данном случае нужно использовать toggleClass на двух элементах сразу: активном
сейчас и тому по которому кликнули. Для объединения можно спользовать метод add

Например так:

$(document).ready(function(){
    $('.map-marker').on('click', function() {
        var $me = $(this);
        var id = $me.data("id");

    var $tab = $('.map-marker[data-id=' + id + ']');
    var $tabBody = $('.map-bubble[data-id = ' + id + '-content]');

        $('.map-marker.is-open').add(this).toggleClass('is-open');

        $('.map-bubble.is-visible').add('.map-bubble[data-id = ' + id + '-content]').toggleClass('is-visible');

    });
});


Ответ 2

$('.qeqqe').click(function() {
  
  if( $(this).hasClass('open') ) {
    $(this).removeClass('open');
  } else {
    $('.qeqqe').removeClass('open');
    $(this).addClass('open');
  }
  
});
.qeqqe {
  width: 256px;
  height: 64px;
  background: #F0F4F8;
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
}

.open {
  background: #f864bb;
}






Ответ 3

Используй toggleClass вместо add\remove

------------------
тогда если через add\remove то
$('div1').addClass('qeqqe').siblings().removeClass('qeqqe');