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

嗨，我需要一些帮助来修改我的脚本。我想做的是： 我有一个小而简单的脚本。它会改变容器的类别，因此我会影响容器的行为和外观。在我的场景中，按钮用音乐播放器打开一个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也使用相同的脚本来关闭容器。感谢您的帮助：-）

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

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

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

document.getElementById（myButton）.onClick=function（e）{
x=e.target.getAttribute（'data'）
}

如果需要多个参数，请添加其他数据标记：

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

---

我建议改用

数据

属性

例如：

//像这样注册侦听器
var btns=document.querySelectorAll（“[data music]”）；
btns.forEach（功能（elm）{
elm.addEventListener（'click'，函数（e）{
//你的职能
console.log（this.dataset.music）；
})
})

播放m1
玩m2
玩m3

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

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

深蓝色
容器内容
var btns=document.querySelectorAll（“[data music]”）；
btns.forEach（功能（elm）{
elm.addEventListener（'click'，函数（e）{
//作用
var FFplayer=document.getElementById（（this.dataset.music））；
if（FFplayer.classList.contains（“音频隐藏”））{
FFplayer.classList.remove（“音频隐藏”）；
FFplayer.classList.add（“音频显示”）；
}否则{
FFplayer.classList.remove（“显示音频”）；
FFplayer.classList.add（“音频隐藏”）；
Array.prototype.slice.call（document.queryselectoral（'audio'））.forEach（函数（audio）{audio.pause（）；}）；
}
})
})

这里是jquery。谢谢大家。你给我指路：-）

---

谢谢，我会试试的。：-）现在我对IE 10有一个问题，因为它不理解数据。你解决了吗？请看看这些：或者谢谢你的帮助，我会试试的

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

    });
});
})