javascript - 无法使用jQuery的click事件更改变量

我试图使用click事件将全局变量finish从false更改为true，以防止将鼠标悬停在圆圈上。
使用click事件后，我的全局变量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(
    	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>

最佳答案

问题是您的检查逻辑发生在悬停事件绑定之上，因此仅在首次运行代码时才对它进行一次评估。您需要检查处理程序函数本身中的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会更加惯用/语义化。

关于javascript - 无法使用jQuery的click事件更改变量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46238088/