jquery - 功能有时需要双击才能工作

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

我确信有更好的方法可以达到类似的结果，但现在，这是一种工作。唯一的问题是，有时我必须双击要调用的函数的按钮。

我最终会替换整个功能，但有人能指出为什么它有时需要双击，有时需要单击吗？

（并且我提前向任何试图阅读这些胡言乱语的人道歉。）

Answer 1

为什么不在 $("#clickDiv") 上添加一个属性来管理实际步骤？

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

祝你好运。

Answer 2

简单地设置它们并切换它们似乎是一种更简单的方法。我可能有相反的初始状态/类，但这应该切换东西。

$("#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/

Answer 3

在单击时向元素添加一个类，以告知发生了哪些操作，然后根据存在的类做一件事或另一件事。

 $("#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 4

那这个呢？

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