从Javascript中的按钮CSS获取变量，并将它们用作ID

您好，我需要一些帮助来修改我的脚本。我想做什么：我有一个小而简单的脚本。它会更改容器的类别，以便对容器的行为和外观产生影响。在我的情况下，按钮用音乐播放器打开div。从Javascript中的按钮CSS获取变量，并将它们用作ID

我的问题是我需要将所有按钮声明为脚本。按钮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的变量。关闭按钮也使用相同的脚本关闭容器。感谢您的帮助:-)

来源

2016-11-19 Reinhard Wedemeyer

我会建议使用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>

来源

2016-11-19 13:12:04 RizkiDPrast

谢谢，我会尝试。 :-) –

现在我有一个IE 10的问题，因为它不明白数据集 –

你有解决这个问题吗？请检查这些： http://stackoverflow.com/a/12341081/5929494 或 http://stackoverflow.com/a/7127963/5929494 – RizkiDPrast

你应该能够在数据标签属性设置的按钮，只是读取该变量：

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

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

如果多个PARAMS需要添加额外的数据标签：

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

来源

2016-11-19 13:06:55

感谢您的帮助将尝试 –

谢谢你们，这是我一直在寻找。我的功能现在是这样的：播放按钮和关闭按钮正在工作。

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

来源

2016-11-21 13:07:13

而这里在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"); 

    }); 
}); 
})

来源

2016-11-21 19:21:01

从Javascript中的按钮CSS获取变量，并将它们用作ID

回答

相关问题