Question

如何在下面的示例中正确绑定值j？

for (j = 0; j < shorts[i+1].length; j++) {
    $('#Container').append($('<button id="but'+(j+1)+'" type="button" onclick="func(this,j)">'+ values[j]+'</button>'));
)};

Answer 1

j应该作为变量连接，否则它将被视为字符串，onclick方法看起来像func(this,j)。

这应该onclick="func(this,'+j+')"

for (j = 0; j < shorts[i+1].length; j++) {
    $('#Container').append($('<button id="but'+(j+1)+'" type="button" onclick="func(this,'+j+')">'+ values[j]+'</button>'));
};

选项2

您也可以通过这样的绑定代替内联的onclick方法

来实现

var $button = $('<button />')
  .attr('id', j+1)
  .text(j+1)
  .on('click', func.bind(null, j+1));
  $('#Container').append($button);

这样，函数可以使用值j + 1。

function func(a){
  alert(a);
}

for (var j = 0; j < 10; j++) {
  var $button = $('<button />')
  .attr('id', j+1)
  .text(j+1)
  .on('click', func.bind(null, j+1));
  $('body').append($button);
};

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

Answer 2

您需要将j从String中取出并正确连接

fiddle

values = [1, 2, 3, 4, 5, 6, 7, 8, 1, 3];

for (j = 0; j < 10; j++) {
    var div = $('<button id="but' + (j + 1) + '" type="button" onclick="func(this,' + j + ')">' + values[j] + '</button>');
    $('#mydiv').append(div);
}

Answer 3

您可以使用基本字符串连接执行此操作，如下所示：

$('#Container').append($('<button id="but'+(j+1)+'" type="button" onclick="func(this,'+j+')">'+ values[j]+'</button>'));

或者您可以使用事件对象的属性从正在单击的元素中提取信息。请参阅srcElement here上的部分。

这可以通过定义像

这样的函数来完成

function(event){
//pull info from event with
event.srcElement
//use that to decide what to do inside the function
}

并将该字符串传递到您的html onClick

Answer 4

在没有内嵌点击处理程序的情况下附加按钮。

添加委派的点击处理程序，您可以使用index()方法访问按钮的位置：

var values= ['a','b','c','d','e','f','g','h','i','j'];

for (j = 0; j < 10; j++) {
  $('#Container').append($('<button>' + values[j] + '</button>'));
}

$('#Container').on('click', 'button', function() {
  alert($(this).index());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Container"></div>

使用函数参数绑定循环索引

4 个答案:

选项2