我在悬停在图像上时播放声音(这已经正常工作)并且想要包含一个按钮,可以根据需要将其关闭。不幸的是,我还没有能够让它发挥作用。
我目前的代码如下:
用于制作声音
//a bunch of code to generate the audio that ends on
var mouseoversound = createsoundbite('mysound.mp3')
用于触发
$(".play").mouseover(function() {
mouseoversound.play();
});
听众元素
<%= image_tag "image.png", class:'logo-image play' %>
我认为禁用它的最简单方法是删除课程&#39; listen&#39;对于元素监听器中的事件(即&#39; .play&#39;),我累了:
$(".sound").click(function(){
$(".logo-image").removeClass("play");
});
//.sound is the class of the button that's intended to block it.
虽然后一个脚本确实成功删除了该类&#39; play&#39;每次我将鼠标悬停在图像上时,声音都会继续播放。我错过了什么?声音不应该停止播放吗?
您是否看到其他任何解决方案?
干杯
答案 0 :(得分:4)
问题是因为事件处理程序绑定到元素。绑定事件后删除类不会影响该绑定。要影响事件处理程序,您可以调用off()
,如下所示:
$(".sound").click(function(){
$(".logo-image").off('mouseover');
});
或者,如果您想根据类切换声音功能,您可以保留当前逻辑并检查该元素是否仍然包含mouseover
处理程序中的类:
$(".logo-image").mouseover(function() {
if ($(this).hasClass('play') {
mouseoversound.play();
}
});
$(".sound").click(function(){
$(".logo-image").toggleClass("play");
});