Question

我基本上有这段代码。我要在一个循环中添加按钮，我希望当我单击该按钮时，它可以显示所写的数字。因此，要做到这一点，我想获得按钮的位置，例如，如果单击第一个按钮，它将返回0，因此我可以使用该数字访问数组并获取数字。我该怎么办？

    var ar = [1,2,3];
    for(i = 0; i < 3; i++) {
        $("#add").append(
         '<div>'+
         'Hello ' +
         ar[i] +
         '<button class ="addx"> B </button>'+
         '</div>'
        )
    }

    $(".addx").click(function(){
    	alert($(this).text());
    });

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

Answer 1

这是使用函数式编程的一种更好的方法（而不是在for循环中不断操作DOM）

const arr = [1, 2, 3];

const toElement = arrVal => $('<div/>', {
  text: `Hello ${arrVal}`,
  append: $('<button/>', {
    text: 'B',
    on: {
      click: function() {
        alert( arrVal );
      }
    }
  })
});

// Append once a collection of elements returned by mapping over an array
$("#add").append( arr.map(toElement) );

<div id="add"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

上面我们在toElement内传递了一个函数arr.map()。
Map将为数组的长度创建新元素，并传递当前迭代的arrVal。
toElement会隐式返回一个jQuery DIV元素，其中一个BUTTON元素为子元素，并在创建时为分配一个点击处理程序。新元素的整个数组集合比.add 到#add-一次。

PS：使用其他建议的解决方案，结果是：在每次循环迭代中-在DOM中查找#add元素。追加DIV。中继。重涂。再次，对于您的数组的长度。完成此操作后，返回带有.addx类的整个文档元素（可能不是您所期望的），并附加一个click事件，这可能恰好是将相同（重复）的侦听器附加到同一元素上（如果是重复操作）。

Answer 2

您可以将按钮的索引存储在data属性中，然后单击按钮时，获取该索引并返回到原始数组以获取值。

var ar = [1, 2, 3];
for (i = 0; i < 3; i++) {
  $("#add").append(
    '<div>' +
    'Hello ' +
    ar[i] +
    '<button class ="addx" data-index='+i+'> B </button>' +
    '</div>'
  )
}

$(".addx").click(function() {
  const index = $(this).data('index');
  alert(ar[index]);
});

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

Answer 3

如果仍然按照您的方式操作，我们可以为这些按钮赋予data属性，并从循环中将i作为值添加，例如：

'<button class="addx" data-index="'+i+'"> B </button>'

这样，您的按钮将保留它们在循环内的索引，因此您可以轻松地使用此索引来访问特定索引处的数组项。您可以从这样的属性中获取现有数据（基于之前的HTML示例）：

$(this).data('index')

这是工作示例：

var ar = [1,2,3];
for(i = 0; i < 3; i++) {
$("#add").append(
    '<div>'+
    'Hello ' +
    ar[i] +
    '<button class="addx" data-index="'+i+'"> B </button>'+
    '</div>'
  )
}

$(".addx").click(function(){
  var index = $(this).data('index');
  alert($(this).text() + ", index is " + index + ". Arr value at this index is " + ar[index]);
});

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

Answer 4

您可以潜在地使用元素相对于具有相同类的所有元素的位置的索引。

var ar = [1, 2, 3];
//using map to only append once.
$('#add').append($.map(ar, function(element){
  return `<div>Hello ${element} <button class ="addx"> B </button></div>`;
}));

var $addx = $('.addx');

$addx.click(function() {
  alert(ar[$addx.index(this)]);
});

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

Answer 5

最直接的方法是使用Data Attributes，例如：

$(function() {
    var ar = [1,2,3];

    var html = "";
    for(i = 0; i < ar.length; i++) {
        html += `<div>Hello ${ar[i]}`+
        // using a data attribute called "num"
        `<button data-num=${ar[i]} class="addx">`+
        ` B </button></div>`;
    }
    $("#add").append($(html));

    $(".addx").click(function() {
        // "num" is available in the dataset property of the DOM element:
        console.log(this.dataset.num);
    });
});

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

如何在同一个类的元素中获取某些内容？

5 个答案: