javascript - jquery if不起作用

问题描述

问 题

<script src="jquery-2.2.2.min.js"></script>
<script>
    $(function () {
        var click = 1;
        if (click == 1) {
        $(".span").hover(function () {
            var index = $(this).index() + 1;
            var star = "0px -" + index * 16 + "px";
            $("div").css({"background-position": star});
        }, function () {
            $("div").css({"background-position": "0px 0px"});
        })
    }
        $(".span").click(function () {
            var cs=$(this).index() ;
            var cs1=cs * 16 +96;
            var cs2="0px -"+cs1+"px";
            $("div").css({"background-position":cs2});
            click=0;
            })
    })
</script>

用JQ写了一个hover事件和click事件 现在想如果click后 hover事件就不起作用，使用了if。但是if不起作用了 ，不明白啊。。小弟求教各位大佬了。。。。

解决方案

要明确的一点是，$(selector).click/hover(callback)是对相应的动作进行注册，真正在事件触发后运行的逻辑是在callback中的，所以你的代码中if判断逻辑只会在代码初次加载的时候才会运行。
至于修改方法有两种实现：
一是按你的思路来，把if放到hover的回调函数里面，代码如下：

    $(function() {
      var click = 1;

      $(".span").hover(function() {
        if (click === 1) {
          var index = $(this).index() + 1;
          var star = "0px -" + index * 16 + "px";
          $("div").css({
            "background-position": star
          });
        }
      }, function() {
        $("div").css({
          "background-position": "0px 0px"
        });
      })


      $(".span").click(function() {
        var cs = $(this).index();
        var cs1 = cs * 16 + 96;
        var cs2 = "0px -" + cs1 + "px";
        $("div").css({
          "background-position": cs2
        });
        click = 0;
      })

    })

二是用bind绑定事件，在click的回调函数中对hover进行unbind解绑

这篇关于javascript - jquery if不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！