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>

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
    }
});

我会慷慨解囊。

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;
});

Answer 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时，它不会执行任何操作，或处理以不同方式悬停。

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

根据按钮的状态执行代码

2 个答案: