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（参数）：

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

在按钮中将波段指定为数据属性：

<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属性。每个都是一个字符串值。

如何使用按钮将参数传递给函数

2 个答案:

通过Javascript

使用jQuery