Question

我有一堆猫，我想在点击时提醒每只猫，我得到的是如果你点击cat3，猫：cat4，cat5也会循环播放。我怎么能在jquery中做到这一点？谢谢！

var cats = ['cat1','cat2','cat3','cat4','cat5'];
for(var i=0; i<cats.length; i++) {

var catz = cats[i];

$('body').append('<div class="catPremium">' + cats[i] + '</div>');

$('.catPremium').on('click', (function(numCopy) {
    return function() {
            alert(numCopy);
    };
})(catz));
}

Answer 1

问题是如何注册事件处理程序，在每次迭代中，您都要将事件处理程序添加到所有现有的catPremium元素，而不是仅定位最近的元素。

一个简单的解决方案是使用.appendTo将返回新创建的元素，然后将处理程序仅添加到该元素。

＆＃13;

var cats = ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'];
$.each(cats, function(i, cat) {

  $('<div/>', {
    text: cat,
    'class': 'catPremium'
  }).appendTo('body').on('click', function() {
    alert(cat)
  });
});

＆＃13;

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

＆＃13;

另一种解决方案

＆＃13;

var cats = ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'];

cats.forEach(function(cat) {
  $('<div/>', {
    text: cat,
    'data-cat': cat,
    'class': 'catPremium'
  }).appendTo('body')
});


$(document).on('click', '.catPremium', function() {
  alert($(this).data('cat'))
});

＆＃13;

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

＆＃13;

Answer 2

$('.catPremium')使用catPremium类定位所有元素。您需要附加事件才能使用上一个附加元素。您可以使用:last选择器和类选择器来实现此目的：

$('.catPremium:last').on('click',(function(){
    //rest code
});

<强> Working Demo

如何点击循环数组元素，只获取它的值

2 个答案: