Question

我有一个功能可以在悬停时禁用第一次点击时的链接操作，然后在第二次点击时允许链接操作：

<script type="text/javascript">
    $('document').ready(function () {

        $("#menu ul > li").hover(function () {
            i = 1;
            if ($('div', this).children().size() > 0) {
                $('.drop', this).addClass("locked");
            }

            $('.locked').click(function () {
                if (i < 2) {
                    i++;
                    console.log("if 1 i = ", i);
                    return false;
                } else {
                    i = 1;
                    console.log("if 2 i = ", i);

                }
            });

            clearTimeout($.data(this, 'timer'));
            $('div', this).stop(true, true).delay(300).slideDown(200);
        }, function () {
            $.data(this, 'timer', setTimeout($.proxy(function () {}, this), 100));
            $('div', this).stop(true, true).slideUp(100);
            $('.drop', this).removeClass("locked");
            i = 1;

        });

    });
</script>

在第一个悬停时，该功能正常工作，但是如果我让该功能在没有单击的情况下运行，则将鼠标移出悬停元素，然后返回并再次“删除”菜单中的.click停止工作。在控制台中，似乎if子句直接循环。任何想法为什么？

Answer 1

<script type="text/javascript">
    var  i = 1;//yuo may want to re-name this since it is now global
    $('document').ready(function () {

        $("#menu ul > li").hover(function () {
            i = 1;
            if ($('div', this).children().size() > 0) {
                $('.drop', this).addClass("locked");
            }



            clearTimeout($.data(this, 'timer'));
            $('div', this).stop(true, true).delay(300).slideDown(200);
        }, function () {
            $.data(this, 'timer', setTimeout($.proxy(function () {}, this), 100));
            $('div', this).stop(true, true).slideUp(100);
            $('.drop', this).removeClass("locked");
            i = 1;

        });

         $('.locked').click(function () {
                if (i < 2) {
                    i++;
                    console.log("if 1 i = ", i);
                    return false;
                } else {
                    i = 1;
                    console.log("if 2 i = ", i);

                }
            });

    });
</script>

Answer 2

这是我自己的解决方案：

<script type="text/javascript">

    $('document').ready(function() {
    var  drop_i = 1;

               $("#menu ul > li").hover(function () {

               if($('div', this).children().size() > 0){
               $('.drop', this).addClass( "locked" );                                      
               }                   
               clearTimeout($.data(this, 'timer'));
                  $('div', this).stop(true, true).delay(300).slideDown(200);
                },                     
                function () {
               $.data(this, 'timer', setTimeout($.proxy(function() {
              }, this), 100));
               $('div', this).stop(true, true).slideUp(100);
               $('.drop', this).removeClass( "locked" );


              });

                $('.drop').click(function(){
                console.log("clicked");
                if (drop_i < 2 && $('.drop').hasClass('locked')) {                   
                 drop_i++;
                 console.log("if 1 i = ", drop_i);
                 return false;
                }
                else { 
                 drop_i = 1;
                 console.log("if 2 i = ", drop_i);
                //return true;
                }                   
              });                    


           });



         </script>

现在正常工作。

悬停的jquery问题，click和if语句

2 个答案: