Как связать несколько событий click на одном элементе в JQuery?

Я хочу, чтобы огонь события срабатывал одним щелчком элемента, а затем другое событие во втором щелчке того же элемента. Я приложил демо-ссылку ниже. Проблема в том, что события привязаны так, что один клик проходит до последнего события, не дожидаясь второго щелчка. Извините, если это дубликат, но я не могу найти ту же проблему на этой доске.

Я, наверное, не очень хорошо сформулировал этот вопрос, и я уверен, что у меня возникнут проблемы ...

$(function(){
l $('.box')
      .click(function() {
        $(this).removeClass('red'
                        ).addClass('black');
      })
      .click(function() {
        $(this).removeClass('black'
                        ).addClass('blue');
      });
});`

http://jsfiddle.net/MEFNG/1/

4
nl ja de
Вы хотите, чтобы события щелчка переключались или вы хотите, чтобы каждый из них запускался один раз?
добавлено автор Explosion Pills, источник
Я думаю, вам нужен один обработчик событий с разными условиями: в примере условие было бы: if ($ (this) .hasClass ('...')) {...} и т. Д.
добавлено автор axel.michel, источник

4 ответы

http://jsfiddle.net/lollero/MEFNG/3/

HTML:

<div class="box red"></div>

CSS:

div.box {
  width: 100px;
  height: 100px;
}
.red {background:red}
.black {background:black}
.blue {background:blue}

JQuery:

$(function(){

    $('.box').on("click", function() {

        var box = $(this);

        if ( box.hasClass('red') ) {
            box.removeClass('red').addClass('black');
        }
        else if ( box.hasClass('black') ) {
            box.removeClass('black').addClass('blue');
        }
        else if ( box.hasClass('blue') ) {
            box.removeClass('blue').addClass('red');
        }

    });

});
7
добавлено
Благодаря! Это именно то, чего я хотел. Большое спасибо.
добавлено автор user1199178, источник

используйте делегацию для достижения наилучшей производительности в этом случае:

$('.box').parent()
.on('click', '.red', function() {
  $(this).removeClass('red').addClass('black');
})
.on('click', '.black', function() {
  $(this).removeClass('black').addClass('blue');
});

Конечно, синтаксис может быть намного лучше. Я использую схожую с твоей, чтобы дать вам лучшую картину.

3
добавлено
Спасибо Эру. Я тоже дам этот метод. Мой синтаксис был просто быстрым примером, чтобы показать то, что я хотел, а не фактический синтаксис, который я буду использовать на своем сайте.
добавлено автор user1199178, источник

Try: http://jsfiddle.net/yBdBp/

var classes = ['red','blue','black'];
$('.box div').click(function() {
  $(this).each(function(){
  this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
 });
});

С html:

<div class="box">
   <div class="red"></div>
</div>
0
добавлено
Мне нравится использование массива. Пример, который я изначально дал, если для 3 цветных ящиков, но я буду использовать код для циклического перехода через 5 спрайтов. Массив имеет больше смысла.
добавлено автор user1199178, источник

Попробуйте это, если хотите что-то более динамичное. Сохраняя счет, вы можете добавить столько цветов, сколько хотите, и оно будет работать нормально:

var classes = ['red','green','yellow','blue'];
$('.box').click(function() {
  var $this = $(this),
      count = $this.data('count') || 0;
  $this.data('count', count >= classes.length-1 ? 0 : count+1);
  $this.removeClass(classes.join(' ')).addClass(classes[count]);
});

Demo: http://jsbin.com/adoqan/1/edit

0
добавлено
Да, data хорош для всего, но я был бы семантическим с цветами, но, возможно, не с другими вещами ... dunno
добавлено автор elclanrs, источник
Я собирался предложить, возможно, добавить и удалить классы дочернего элемента .box таким образом, чтобы вам не пришлось беспокоиться об удалении класса (например, jsfiddle.net/lollero/MEFNG/5 ). Хорошо, что вы тоже работали. Вы получили мой голос. Ваша ссылка jsbin не обновляется.
добавлено автор Joonas, источник
Не хочу наводнять ваш ответ комментариями, но я подумал, что если мы хотим идти динамично ... мы должны идти глубже! jsfiddle.net/lollero/MEFNG/7
добавлено автор Joonas, источник
Мой девиз: «Семантический ... schmemantic ...». || Помнишь, когда я что-то сказал о затоплении? Забыл изменить 1 номер в коде, поэтому: jsfiddle.net/lollero/MEFNG/8
добавлено автор Joonas, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda