jquery - 根据按钮的状态执行代码

Question

当谈到 jquery 时，我是一个糟糕的新手，我正在尝试构建一个菜单(由具有相同类的多个 div 组成)在悬停时播放独特的声音。这部分工作感谢some help from here .

现在我还想在该页面的某处添加一个开关(不是复选框)，根据其状态(如开关)禁用此功能

这是我做声音部分的方法:

<div class="trigger">
    <audio class="sound" preload="auto">
        <source src="sound1.mp3"></source>
        <source src="sound1.ogg"></source>
    </audio>
</div>

<div class="trigger">
    <audio class="sound" preload="auto">
         <source src="sound2.mp3"></source>
         <source src="sound2.ogg"></source>
    </audio>
</div>

j查询:

$('.trigger').hover(
    function() {
        sound = $(this).children()[0];
        sound.play();
    }, function() {
        sound.pause();
        sound.currentTime = 0;
    }
);

至于切换按钮部分，我想我需要这样的东西..如果是这样，我不知道如何“混合”这两个功能:)

$("#toggle_button").click(function(){
    if($("#OnOffDiv").hasClass("On"))
    {
        $("#OnOffDiv").removeClass("On");
        $("#OnOffDiv").addClass("Off");
        DO SOMETHING
);

    }
    else
    {
        $("#OnOffDiv").removeClass("Off");
        $("#OnOffDiv").addClass("On");
        $("#OnOffDiv").html("ON");
        DO SOMETHING ELSE
    }
});

如有任何帮助，我将不胜感激。

Answer 1

您可以使用 toggleClass() 来缩减切换部分脚本:

$("#toggle_button").click(function () {
    $('#OnOffDiv').toggleClass('on off').text($('#OnOffDiv').attr('class'));
});

然后在您的悬停事件中，只需检查 $('#OnOffDiv').hasClass('on') 是否:

$('.trigger').hover(function () {
    if ($('#OnOffDiv').hasClass('on')) {
        sound = $(this).children()[0];
        sound.play();
    }
}, function () {
    sound.pause();
    sound.currentTime = 0;
});