Функция иногда требует двойного щелчка, чтобы работать

Question

У меня есть 3 функции такие же, как и ниже. ShowAction2(), ShowAction3() и ShowAction4(). Каждая функция отвечает за отображение DIV, скрытие других DIV и добавление и удаление классов.

Затем он удаляет функцию showAction() и добавляет новую функцию gogo(). который отменяет весь процесс, если функция называется второй раз.

$("#clickDiv").click(function showAction(){ 
    $("#infDivOne").show(); 
    $("#infDivTwo, #infDivThree, #infDivFour").hide(); 
    $(".goActive2, .goActive3, .goActive4").removeClass('glow'); 
    $("#clickDiv2, #clickDiv3, #clickDiv4").removeClass('rotated'); 
    $("#clickDiv").addClass('rotated'); 
    $(".goActive").addClass('glow'); 
    $("#clickDiv").off('click'); 

    $("#clickDiv").on('click', function gogo(){ 
     $("#infDivOne").hide(); 
     $(".goActive").removeClass('glow'); 
     $("#clickDiv").removeClass('rotated'); 
     $("#clickDiv").off('click'); 
     $("#clickDiv").on('click',showAction); 
    }); 
    }); 

Я уверен, что есть лучшие способы достижения аналогичного результата, но прямо сейчас, это своего рода работа. Единственная проблема заключается в том, что иногда мне нужно дважды щелкнуть кнопку для функции, которую нужно вызвать.

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

(И я извиняюсь заранее для тех, кто пытается прочитать эту jibberish.)

Answer 1

Почему бы вам не поставить атрибут $ («# clickDiv») для управления фактического шага?

$("#clickDiv").on("click",function showAction(){ 
    var _step = $(this).attr("step"); 
    switch(_step){ 
     case 1: 
     case 2: 
    } 
}); 

Удачи.

Answer 2

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

$("#clickDiv").click(function showAction(){ 
    var $this = $(this); 
    if($this.hasClass("secondClick")) 
    { 
     showAction(this); 
     $this.removeClass("secondClick"); 
    } 
    else if($this.hasClass("firstClick")) 
    { 
     $("#infDivOne").hide(); 
     $(".goActive").removeClass('glow'); 
     $("#clickDiv").removeClass('rotated'); 
     $this.removeClass("firstClick").addClass("secondClick"); 
    } 
    else{ 
     $this.addClass("firstClick"); 
     $("#infDivOne").show(); 
     $("#infDivTwo, #infDivThree, #infDivFour").hide(); 
     $(".goActive2, .goActive3, .goActive4").removeClass('glow'); 
     $("#clickDiv2, #clickDiv3, #clickDiv4").removeClass('rotated'); 
     $("#clickDiv").addClass('rotated'); 
     $(".goActive").addClass('glow'); 
    } 

    }); 

Answer 3

Как насчет этого?

$("#clickDiv").click(function() { 
    if($("infDivOne").is(":visible")) { 
     // This div is visible, so toggle the effects off 
    } 
    else { 
     // This div isn't visible, so toggle the effects on 
    } 
}); 

Answer 4

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

$("#infDivOne").hide(); 
$("#infDivTwo, #infDivThree, #infDivFour").show(); 
$(".goActive2, .goActive3, .goActive4").addClass('glow'); 
$("#clickDiv2, #clickDiv3, #clickDiv4").addClass('rotated'); 

$("#clickDiv").click(function() { 
    $("#infDivOne, #infDivTwo, #infDivThree, #infDivFour").toggle(); 
    $(".goActive, .goActive2, .goActive3, .goActive4").toggleClass('glow'); 
    $("#clickDiv, #clickDiv2, #clickDiv3, #clickDiv4").toggleClass('rotated'); 
}); 

сейчас, если вы хотите, чтобы все из них, чтобы переключиться, просто сделать:

$("#clickDiv, #clickDiv2, #clickDiv3, #clickDiv4").click(function() { 
    $("#infDivOne, #infDivTwo, #infDivThree, #infDivFour").toggle(); 
    $(".goActive, .goActive2, .goActive3, .goActive4").toggleClass('glow'); 
    $("#clickDiv, #clickDiv2, #clickDiv3, #clickDiv4").toggleClass('rotated'); 
    $("#clickDiv").toggleClass('rotated'); 
    $(".goActive").toggleClass('glow'); 
}); 

---

EDIT: Учитывая все ваши комментарии, я считаю, что это гораздо более легко сделать с помощью классов:

Markup:

<div id="clickDiv1" class="clickDiv">One click</div> 
<div id="clickDiv2" class="clickDiv">Two click</div> 
<div id="clickDiv3" class="clickDiv">Three click</div> 
<div id="clickDiv4" class="clickDiv">Four click</div> 
<div id="infDivOne" class="InfoDiv">Info 1</div> 
<div id="infDivTwo" class="InfoDiv">Info 2</div> 
<div id="infDivThree" class="InfoDiv">Info 3</div> 
<div id="infDivFour" class="InfoDiv">Info 4</div> 
<div id="goActive">ACTIVE: <span class="goActive">One</span> 
<span class="goActive">Two</span> 
<span class="goActive">Three</span> 
<span class="goActive">Four</span> 
</div> 

Код:

// event handler 
$(".clickDiv").click(function() { 
    var index = $(this).index(); 
    $('.InfoDiv').hide().eq(index).show(); 
    $('.goActive').removeClass('glow').eq(index).addClass('glow'); 
    $('.clickDiv').removeClass('rotated').eq(index).addClass('rotated'); 
}); 
// setup first one as active 
$(".clickDiv").eq(0).trigger('click'); 

Fiddle показать в действии: http://jsfiddle.net/MMerB/