如何使用按鈕將參數傳遞給功能

Question

我有幾個使用相同實現的按鈕，但需要將不同的參數傳遞給函數。 如果是用於上下文的mp3播放器。 我的想法應該很容易理解，但是我無法使語法起作用。 希望有人能幫忙。

HTML中的按鈕：

<input id="songToPlay" type="button" value="Click To Play!"/>

然后javascript onclick調用：

document.getElementById('songToPlay').onclick = playSongByThisBand;

方法playSongByThatBand（）：

function playSongByThisBand() {
    playSongByAnyBand(theIntegerThatRepresentsThisBand);
}

playSongByAnyBand（parameter）方法：

function playSongByAnyBand(anIntegerThatRepresentsABand) {
    currentSongIndex=anIntegerThatRepresentsABand;
    //other implementation ect...
}

我嘗試過的另一種方法是：

function playSongByAnyBand(anIntegerThatRepresentsABand) {
    currentSongIndex=anIntegerThatRepresentsABand;
    someObject = function() {other implementation ect...}
}

var functionIWantToExecutre = new playSongByAnyBand(anIntegerThatRepresentsABand)

functionIWantToExecute.someObject();

我無法執行playSongByAnyBand。 我可以單獨實現每個按鈕，但是這比我的方法還要多余。 誰能通過這種方式幫助我實現多個按鈕的語法？

Answer 1

通過Javascript

<input type="button" value="Play" onclick="playSong('param1')" />

---

function playSong(param) {
    // do something
}

使用jQuery

<input type="button" value="Play" id="btnPlay" data-param="param1" />

---

$("#btnPlay").click(function() {
    var param = $(this).data("param");
    // do something
});

Answer 2

在按鈕中，將band指定為data屬性：

<input id="songToPlay" 
       type="button" 
       value="Click To Play!"
       data-band="bandName" />     

您的事件處理程序yoiu可以這樣獲取它：

function playSong (ev) {
   var song = this.id;
   var band = this.getAttribute ('data-band');

   // .. put your play code for band/song rght here

}

訪問data-band屬性的另一種方法是使用dataset這是一種相對較新的HTML功能，目前在大多數當前瀏覽器中都可用。

function playSong (ev) {
   var song = this.id;
   var band = this.dataset.band; // Fetches attribute 'data-band'

   // .. put your play code for band/song rght here

}

您可以根據需要為任意信息添加任意多個data-xxx屬性。 每個都是字符串值。