带循环函数的jQuery语法问题

时间:2011-11-27 11:58:06

标签: jquery

我正在寻找关于运行以下代码的方法的一些快速建议。

我需要的是一个名为#p12-1的按钮(点击时)会运行一些功能。再次单击时再运行一些功能。我猜这个我需要一个变量来计算它所在的点击但是我不太确定。请在下面找到我的HTML / jQuery。

$section == (parseInt(1));

$("#p12-1").click(function ()   {
    if ($section == 1)  {
        var $section = (parseInt(currentValue) + 1);        
        //Example Function
                $("#p12-2").fadeOut(1000);
        //End example function 
    };
    if ($section == 2)  {
        var $section = (parseInt(currentValue) + 1);
        //Example Function
                $("#p12-2").fadeOut(1000);
        //End example function              
    };
    if ($section == 3)  {
        var $section = (parseInt(currentValue) + 1);
        //Example Function
                $("#p12-2").fadeOut(1000);
        //End example function              
    };
    if ($section == 4)  {
        var $section = (parseInt(currentValue) + 1);
        //Example Function
                $("#p12-2").fadeOut(1000);
        //End example function                          
    };
});

        <div class="main-slide main-slide-12" style="display:none;">
            <div id="p12-1" style="display:none;"><img src="images/p12-1.png" /></div>
            <div style="display:block;" id="p12-2"><img src="images/p12-2.png" /></div>
            <div style="display:block;" id="p12-3"><img src="images/p12-3.png" /></div>
            <div style="display:none;" id="p12-4"><img src="images/p12-4.png" /></div>
            <div style="display:none;" id="p12-5"><img src="images/p12-5.png" /></div>
            <div style="display:none;" id="p12-6"><img src="images/p12-6.png" /></div>
            <div style="display:none;" id="p12-7"><img src="images/p12-7.png" /></div>
            <div style="display:none;" id="p12-8"><img src="images/p12-8.png" /></div>
            <div style="display:none;" id="p12-9"><img src="images/p12-9.png" /></div>
            <div style="display:none;" id="p12-10"><img src="images/p12-10.png" /></div>
            <div style="display:none;" id="p12-11"><img src="images/p12-11.png" /></div>
            <div style="display:none;" id="p12-12"><img src="images/p12-12.png" /></div>
        </div>            

以下代码似乎不起作用,我该如何解决?

1 个答案:

答案 0 :(得分:0)

您在事件绑定之外声明$section = 1。但是在绑定事件中你重新声明var $section = (parseInt(currentValue) + 1);这会将变量重新声明为本地范围。你可以简化这一点

var $section = 1;
$("#p12-1").click(function () { 
   $section++; //increment section
   if ($section == 1) {
     //do some stuff
   }
   if ($section == 2) {}
});

如果你真的想这样做那么你应该考虑使用switch语句而不是if。