根据按钮状态执行代码

Posted 2023-02-25

【中文标题】根据按钮状态执行代码

【英文标题】：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
    
);

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

【参考方案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 时，它不应该做任何事情，或者以不同的方式处理悬停。

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