从 Javascript 中的按钮 css 获取变量并将它们用作 id

Question

您好，我需要一些帮助来修改我的脚本。我想做的事： 我有一个小而简单的脚本。它改变了容器的类，所以我对容器的行为和外观有影响。在我的场景中，按钮打开一个带有音乐播放器的 div。

我的问题是我需要将所有按钮声明为脚本。在我的例子中，按钮 ID 是 onclick 函数（参见代码）。

所以当我有 10 或 20 个链接时，我还需要每次修改脚本。我的想法是有一个脚本，它通过 id 和容器类来提供它们的变量。所以我不需要修改脚本文件。

// JavaScript Document
function AudioFF() { 
    var FFplayer = document.getElementById(x);
    if (FFplayer.classList.contains("audio-hidden")) {
        FFplayer.classList.remove("audio-hidden");
        FFplayer.classList.add("audio-shown");
    } else {
        FFplayer.classList.remove("audio-shown");
        FFplayer.classList.add("audio-hidden");
        Array.prototype.slice.call(document.querySelectorAll('audio')).forEach(function(audio) {audio.pause();});
    }
};

dbbtn.onclick = function() {
    x = "deepblue";
    AudioFF();
};

swbtn.onclick = function() {
    x = "spacewalk";
    AudioFF();
};

fbtn.onclick = function() {
    x = "forest";
    AudioFF();
};

drbtn.onclick = function() {
    x = "dreamrhythm";
    AudioFF();
};

我的想法是使用与需要使用字符串淡入的容器相同的按钮类作为 id。该按钮具有例如类 btn_a、btn_b ... 等等。容器的 id 为 btn_a、btn_b ... 我希望脚本捕获按钮的类并将该类名用作 getElementById 的变量。 closebutton 也使用相同的脚本来关闭容器。感谢您的帮助:-)

Answer 1

我会建议改用data 属性

这样的例子：

//register listener like this
var btns = document.querySelectorAll('[data-music]');
btns.forEach(function(elm) {
  elm.addEventListener('click', function(e) {
    //your function
    console.log(this.dataset.music);
  })
})

<!--your links-->
<div id="m1"></div>
<div id="m2"></div>
<div id="m3"></div>

<!--just add data-music attribute make it the same with your div id and all set-->
<button data-music="m1">play m1</button>
<button data-music="m2">play m2</button>
<button data-music="m3">play m3</button>

Answer 2

您应该能够为按钮设置数据标签属性，然后从中读取变量：

<button id="myButton" data="variableForMyButton" />

document.getElementById(myButton).onClick = function(e){
    x = e.target.getAttribute('data')
}

如果需要多个参数，您可以添加额外的数据标签：

<button id="myButton" data="variableForMyButton" data-action="someSweetAction" />

Answer 3

谢谢大家，这正是我想要的。我的功能现在是这样的： 播放按钮和关闭按钮正在工作。

<button data-music="m1">Deep Blue</button>
<div id="m1">Container Content</div>


var btns = document.querySelectorAll('[data-music]');
btns.forEach(function(elm) {
  elm.addEventListener('click', function(e) {
    //function
    var FFplayer = document.getElementById((this.dataset.music));
    if (FFplayer.classList.contains("audio-hidden")) {
        FFplayer.classList.remove("audio-hidden");
        FFplayer.classList.add("audio-shown");
    } else {
        FFplayer.classList.remove("audio-shown");
        FFplayer.classList.add("audio-hidden");
        Array.prototype.slice.call(document.querySelectorAll('audio')).forEach(function(audio) {audio.pause();});
    }
  })
})

Answer 4

在 jquery 中。谢谢大家。你给我指路:-)

jQuery (document).ready(function($){
        var btns = $('[data-music]');
        $(btns).each(function() {
        $('[data-music]').on('click', function(e) {
            var FFplayer = $(this).data('music');
            $("#" + FFplayer).toggleClass("audio-hidden audio-shown");

    });
});
})