使用jQuery的点击事件无法更改变量

Question

我正在尝试使用点击事件将全局变量finish从false更改为true以防止悬停在圆上。 我使用点击事件后，我的全局变量finish没有改变（它仍然是false），我仍然可以在一些圈子上徘徊。 这是为什么发生？

var finish = false; 
 

 
$(".rating-circle").click(function() { 
 
    $(this).addClass("rating-chosen"); 
 
    $(this).prevAll().addClass("rating-chosen"); 
 
    finish = true; 
 
}); 
 

 
if (finish == false) 
 
{ 
 
    $(".rating-circle").hover( 
 
    \t function() { 
 
     $(this).addClass("rating-hover"); 
 
     $(this).prevAll().addClass("rating-hover"); 
 
    }, 
 
     function() { 
 
     $(this).removeClass("rating-hover") 
 
     $(this).prevAll().removeClass("rating-hover"); 
 
    }); 
 
}

body { 
 
    font-family: Verdana; 
 
} 
 
h1, h2, h3 { 
 
    color: darkblue; 
 
} 
 
.rating-circle { 
 
    height: 2em; 
 
    width: 2em; 
 
    border: .1em solid black; 
 
    border-radius: 1.1em; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: .1em; 
 
} 
 

 
.rating-hover { 
 
    background-color: yellow; 
 
} 
 

 
.rating-chosen { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>Finding elements using jQuery</h2> 
 
<h3>Rate this session</h3> 
 
<div id="rating-container"> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
</div>

Answer 1

的问题是，你的检查逻辑需要你的悬停事件上面的地方结合，所以只计算一次当代码是第一次运行。您需要检查处理函数本身内的finish标志，或者您可以在单击时解除处理程序的绑定。

$(".rating-circle").hover(function() { 
    if (finish) return; 

    $(this).addClass("rating-hover"); 
    $(this).prevAll().addClass("rating-hover"); 
}, function() { 
    $(this).removeClass("rating-hover") 
    $(this).prevAll().removeClass("rating-hover"); 
}); 

而且，这将是更地道/语义来命名标志像finished或hasFinished。

Answer 2

您的全局变量确实发生了变化，但是太迟了，到那时事件处理程序已经被绑定，并且条件并不重要。

当你在点击反正加入了独特的类，你可以只检查该类的hover事件

$(".rating-circle").click(function() { 
 
    $(this).addClass("rating-chosen"); 
 
    $(this).prevAll().addClass("rating-chosen"); 
 
}); 
 

 
$(".rating-circle").hover(
 
    function() { 
 
    if ($(".rating-circle.rating-chosen").length === 0) { 
 
     $(this).addClass("rating-hover"); 
 
     $(this).prevAll().addClass("rating-hover"); 
 
    } 
 
    }, 
 
    function() { 
 
    if ($(".rating-circle.rating-chosen").length === 0) { 
 
     $(this).removeClass("rating-hover") 
 
     $(this).prevAll().removeClass("rating-hover"); 
 
    } 
 
    });

body { 
 
    font-family: Verdana; 
 
} 
 

 
h1, 
 
h2, 
 
h3 { 
 
    color: darkblue; 
 
} 
 

 
.rating-circle { 
 
    height: 2em; 
 
    width: 2em; 
 
    border: .1em solid black; 
 
    border-radius: 1.1em; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: .1em; 
 
} 
 

 
.rating-hover { 
 
    background-color: yellow; 
 
} 
 

 
.rating-chosen { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>Finding elements using jQuery</h2> 
 
<h3>Rate this session</h3> 
 
<div id="rating-container"> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
</div>

Answer 3

var finish = false; 
 

 
$(".rating-circle").click(function() { 
 
    $(this).addClass("rating-chosen"); 
 
    $(this).prevAll().addClass("rating-chosen"); 
 
    finish = true; 
 
}); 
 

 
$(".rating-circle").hover(function() { 
 
    if (finish == false){ 
 
    $(this).addClass("rating-hover"); 
 
    $(this).prevAll().addClass("rating-hover"); 
 
    } 
 
},function(){ 
 
    if (finish == false){ 
 
    $(this).removeClass("rating-hover") 
 
    $(this).prevAll().removeClass("rating-hover"); 
 
    } 
 
});

body { 
 
    font-family: Verdana; 
 
} 
 
h1, h2, h3 { 
 
    color: darkblue; 
 
} 
 
.rating-circle { 
 
    height: 2em; 
 
    width: 2em; 
 
    border: .1em solid black; 
 
    border-radius: 1.1em; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: .1em; 
 
} 
 

 
.rating-hover { 
 
    background-color: yellow; 
 
} 
 

 
.rating-chosen { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>Finding elements using jQuery</h2> 
 
<h3>Rate this session</h3> 
 
<div id="rating-container"> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
</div>

内