我需要一些帮助来修改我的脚本。我想做的: 我有一个小而简单的脚本。它改变了容器的类,因此我可以影响容器的行为和外观。在我的场景中,按钮打开一个带有音乐播放器的 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 的变量。关闭按钮也使用相同的脚本来关闭容器。感谢您的帮助。
我建议使用
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>
您应该能够为按钮设置数据标签属性,然后从中读取变量:
<button id="myButton" data="variableForMyButton" />
document.getElementById(myButton).onClick = function(e){
x = e.target.getAttribute('data')
}
如果需要多个参数,您可以添加额外的数据标签:
<button id="myButton" data="variableForMyButton" data-action="someSweetAction" />
谢谢大家,这就是我一直在寻找的。我的功能现在是这样的: 播放按钮和关闭按钮正在工作。
<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();});
}
})
})
这里是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");
});
});
})