jquery if不起作用

Question

<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不起作用了 ，不明白啊。。小弟求教各位大佬了。。。。

Answer 1

要明确的一点是，$(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解绑

Answer 2

说实话不知道怎么会有这个需求,你这样不是click就是多余的了? 又或者你是要通过js触发click?

个人做的话会是：

1. 移进span时在span上添加class

2. 移出span时在span移除class

3. click时先验证span是否包含class

$(function(){
    $(".span").hover(function(){
        $(this).addClass("active");
        //TODO...
    }, function(){
        $(this).removeClass("active");
        //TODO...
    }).click(function(){
        if(!$(this).hasClass('active')) {
            return false;
        }
        //TODO...
    });
});