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

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( 
    	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

＆＃13;

＆＃13;

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" );
  }
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;