Question

在我的javascript中，我有一个包含3个元素的数组：

var array = ["one", "two", "three"];

如何创建3个html按钮，使每个按钮的onclick调用带参数数组[i]的函数。

我希望得到的结果：

<button onclick='function("one")'></button>
<button onclick='function("two")'></button>
<button onclick='function("three")'></button>

Answer 1

为了让您快速运行，可以快速修复现有代码。

如果您说按钮按顺序排列，那么您可以使用按钮的索引。

＆＃13;

var array = ["one", "two", "three"]; 

function Myfunction(e){
  var index = $('.container button').index(e.target)
  alert(array[index]);  // now you have the value here, use it for your further stuff
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button onclick='Myfunction(event)'></button>
<button onclick='Myfunction(event)'></button>
<button onclick='Myfunction(event)'></button>
  </div>

＆＃13;

如果您正在寻找更简洁的方法，那么我建议不要使用onclick属性绑定事件并使用Jquery直接绑定事件。如下。..

＆＃13;

var array = ["one", "two", "three"];

$('.container button').on('click', function() {
  var index = $('.container button').index($(this));
  alert(array[index]);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button ></button>
  <button ></button>
  <button ></button>
</div>

＆＃13;

Answer 2

使用内联处理程序有时会给我们带来麻烦。例如，通过在事件处理程序中使用this访问当前元素。在这种情况下，您可以使用dataset和addEventListener。

执行此操作

var array = ["one", "two", "three"];
array.forEach(function(itm){
  var elem = document.createElement("button");
  elem.textContent = itm;
  elem.dataset.data = itm;
  elem.addEventListener("click", clickHandle, false);
  document.body.appendChild(elem);
});

function clickHandle(){
  alert(this.dataset.data); //will display "one"/"two"/"three" based on the element clicked.
}

DEMO

Answer 3

var btn_list;   //The buttons parent element
var your_func;  //callback function
for (var i = 0; i < array.length; i++)
{
    btn = document.createElement('BUTTON'); //create element
    btn.onclick = function() //assign callback, with item
    {
        your_func(array[i]);
    };
    btn_list.appendChild(btn); //and add it to parent element
}

当然，你的回调函数和你的按钮父元素是在......之前定义的。

动态onclick调用html按钮

3 个答案:

DEMO