javascript - 尝试使用基于数组的jquery输出单独的点击函数

Question

我有一个根据图库中的图像自动生成的数组。我需要为它们提供所有单独的单击事件，这些事件在单击时从另一个数组输出变量，以便我可以将它们传递到附加到 url 末尾的字符串中以提交到 pinterest。让我失望的部分是点击事件，

这是代码，到目前为止它只提醒数组的最后一部分并执行两次，我希望每次点击分别提醒第一次点击的第一个数组和第二次点击的第二个数组位置。

这是对应的数组console.logged，它是不同按钮点击的各个类。

[".btnPinIt , 0", ".btnPinIt , 1"]

for (var j = 1; j < clickArray.length; j++){
    console.log(clickArray[j]);

    $(clickArray[j]).click(function() {
      alert(j);
    });

  }

Answer 1

一个问题是您的 j 对于所有处理程序都处于相同的范围内，因此当单击发生时其值为 clickArray.length，但您不需要单独处理程序。在元素上使用数据属性并从单个处理程序中获取它们。

另一个问题是您从 1 而不是 0 开始对数组进行索引。

您还需要一个包含有效选择器的数组，因为目前您有一个无效 jQuery 选择器的数组。

例如假设您有一个 id 选择器数组:

  clickArray = ["#btnPinIt1",
                "#btnPinIt2"]

  // save the index values on the elements
  for (var j = 0; j < clickArray.length; j++){
    $(clickArray[j]).attr('data-val', j+1);
  }

  // Use a startswith selector (in this example) to handle the clicks

  $("[id^=btnPinIt]").click(function() {
      alert($(this).data('val'));
  });

更简单的方法是使用您的类并按从 1 到 n 的顺序对它们进行索引:

  $('.btnPinIt').each(function(e, i){
      $(this).attr('data-val', i+1);
  }).click(function() {
      alert($(this).data('val'));
  });

这也会链接点击和每个。