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

在点击元素上添加一个类，告诉发生了哪个动作，然后根据当前的类做了一件事。

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

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

4 个答案: