從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

回答

相關問題