根据按钮状态执行代码答案

【问题标题】：execute code depending on state of button根据按钮状态执行代码
【发布时间】：2014-01-11 23:08:31
【问题描述】：

当谈到 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>

jquery:

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

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

【问题讨论】：

标签： jquery css button audio toggle

【解决方案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;
});

【讨论】：

【解决方案2】：

首先，您只需要为按钮打开时设置一个 css 规则，因为您应该为处于默认状态的按钮设置一个规则。所以现在你应该有这个：

$("#toggle_button").click(function(){
    $("toggle_button").toggleClass("on");
});

Alos，你真的不需要一个完整的 div 来存储这些信息。请注意该代码如何更改 toggle_button 的类而不是 OnOffDiv 的类。

你现在注意到什么了吗？当toggle_button 打开时，它有一个on 类。当它关闭时，它不会。这意味着您可以将toggle_button 本身用作变量！

所以现在，如果$(#toggle_button).hasClass("on") 返回true，您的悬停代码应该可以工作。当hasClass("on") 返回false 时，它不应该做任何事情，或者以不同的方式处理悬停。

由于您是新手，我会让您自己完成代码，以便您从中学习。我给了你一切你需要让它工作。如果你真的不能自己解决，请发表评论，我会给你解决方案。

【讨论】：