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

标签 javascript jquery click

我正在尝试使用点击事件将全局变量finishfalse更改为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>

最佳答案

问题是您的检查逻辑发生在悬停事件绑定(bind)之上,因此仅在代码首次运行时评估一次。您需要检查处理程序函数本身内的 finish 标志,或者您可以在单击时取消绑定(bind)处理程序。

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

此外,将您的标志命名为 finishedhasFinished 会更符合惯用/语义。

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

相关文章:

javascript - 当禁用字段集的子项时确定禁用状态元素

javascript - 使用 JavaScript 设置 GIF 循环计数和发布停止事件

javascript - 为滑动图像添加悬停和 onclick 效果?

jquery - 使用 jQuery 获取选择列表中第一个选项的值

javascript - 在 Ipad Safari 上启用快速(双?)点击

javascript - 在类中绑定(bind) d3 事件

javascript - 从 Knockout 可观察数组中删除表中的选定行

javascript - 禁用 rangeslider.js 中的某些范围

javascript - jQuery: .toggle code atlernative 在第二次点击时不起作用

Javascript检查 Canvas 上的透明图像是否被点击