5

Здравствуйте! Есть блоки (у каждого свой 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');

    });
});
0

3 ответа 3

5

В данном случае нужно использовать 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');

    });
});
0
1

$('.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<div class='qeqqe'></div>
<div class='qeqqe'></div>

1
  • @LADYX, так значит я правильно понял вопрос теперь?
    – Doofy
    Commented 19 июн. 2016 в 20:47
0

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

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

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.