Javascript 无法使用带有jQuery的click事件更改变量

我试图使用click事件将全局变量

finish

从

false

更改为

true

，以防止圆圈悬停。 在使用click event之后，我的全局变量

finish

没有改变（它仍然是

false

），我仍然可以将鼠标悬停在一些圆圈上。 为什么会这样

var finish=false；
$（“.rating circle”）。单击（函数（）{
$（此）.addClass（“所选评级”）；
$（this.prevAll（）.addClass（“选择评级”）；
完成=真；
});
if（finish==false）
{
$（“.rating circle”）。悬停（
函数（）{
$（此）.addClass（“评级悬停”）；
$（this.prevAll（）.addClass（“评级悬停”）；
}, 
函数（）{
$（this）.removeClass（“评级悬停”）
$（this.prevAll（）.removeClass（“评级悬停”）；
} );
}

正文{
字体系列：Verdana；
}
h1，h2，h3{
颜色：深蓝色；
}
.评级圈{
高度：2米；
宽度：2米；
边框：1米纯黑色；
边界半径：1.1米；
显示：内联块；
保证金：0；
填充：.1em；
}
.评级悬停{
背景颜色：黄色；
}
.所选评级{
背景颜色：绿色；
}

使用jQuery查找元素
对本次会议进行评分

问题在于，检查逻辑发生在悬停事件绑定之上，因此在代码首次运行时只对其求值一次。您需要检查处理程序函数本身中的

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

或

hassfinished

会更为惯用/语义化。您的全局变量确实发生了更改，但为时已晚，此时事件处理程序已经绑定，条件也无关紧要

在单击添加唯一类时，只需在

悬停

事件中检查该类即可

$（“.rating circle”）。单击（函数（）{
$（此）.addClass（“所选评级”）；
$（this.prevAll（）.addClass（“选择评级”）；
});
$（“.rating circle”）。悬停(
函数（）{
如果（$（“.rating circle.rating selected”）.length==0）{
$（此）.addClass（“评级悬停”）；
$（this.prevAll（）.addClass（“评级悬停”）；
}
},
函数（）{
如果（$（“.rating circle.rating selected”）.length==0）{
$（this）.removeClass（“评级悬停”）
$（this.prevAll（）.removeClass（“评级悬停”）；
}
});
正文{
字体系列：Verdana；
}
h1，
h2，
h3{
颜色：深蓝色；
}
.评级圈{
高度：2米；
宽度：2米；
边框：1米纯黑色；
边界半径：1.1米；
显示：内联块；
保证金：0；
填充：.1em；
}
.评级悬停{
背景颜色：黄色；
}
.所选评级{
背景颜色：绿色；
}

使用jQuery查找元素
对本次会议进行评分

var finish=false；
$（“.rating circle”）。单击（函数（）{
$（此）.addClass（“所选评级”）；
$（this.prevAll（）.addClass（“选择评级”）；
完成=真；
});
$（“.rating circle”）.hover（函数（）{
if（finish==false）{
$（此）.addClass（“评级悬停”）；
$（this.prevAll（）.addClass（“评级悬停”）；
}
}，函数（）{
if（finish==false）{
$（this）.removeClass（“评级悬停”）
$（this.prevAll（）.removeClass（“评级悬停”）；
}
});
正文{
字体系列：Verdana；
}
h1，h2，h3{
颜色：深蓝色；
}
.评级圈{
高度：2米；
宽度：2米；
边框：1米纯黑色；
边界半径：1.1米；
显示：内联块；
保证金：0；
填充：.1em；
}
.评级悬停{
背景颜色：黄色；
}
.所选评级{
背景颜色：绿色；
}

使用jQuery查找元素
对本次会议进行评分