函數有時需要雙擊才能工作

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

向click上的元素添加一個類，以告訴發生了哪個動作，然後根據存在的類執行一件事或另一件事。

$("#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'); 
}); 

---

編輯：鑑於您的所有意見，我相信這是更容易帶班做：

標記：

<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'); 

小提琴在行動中顯示：點擊事件中http://jsfiddle.net/MMerB/