jquery:将单击的项目与映射的项目匹配

以下是我正在尝试做的：

我有很多类似的href：

<a href='javascript:void(0);' class='popup'>Word</a>....more stuff....<a href='javascript:void(0);' class='popup'>Another Word</a>...

我以为我可以通过这种方式匹配对象，但当我记录它们时，我得到的是：

selectedPopup:[a.popupObj#]

此弹出窗口：

我这样做是因为我需要selectedPopup的索引，因为有一个对象保存了所有这些属性以显示弹出窗口。很明显我走错了路，有人能纠正我吗

---

谢谢

您似乎正在尝试将一个HTML元素与一组相关数据或至少一个id进行匹配。现在正是使用

rel

属性的好时机：

因此，您的word链接将如下所示：

<a rel="1" href="#" class="popup">Word</a>

$('.popup').on('click', function(e) {
    e.preventDefault();

    var selectedPopUp = $(this).attr('rel');

    // code follows
});

$('.popup').on('click', function(e) {
    e.preventDefault();

    var title = $(this).data('title');
    var content = $(this).data('content');

    alert(title+"\n"+content);
});

此外，您还可以使用

数据

属性：

<a href="#" data-title="My popup title" data-content="Blah blah blah!" class="popup">Word</a>

试试看：

另外请注意，您应该开始使用

on

方法绑定事件，而不是

live

。从jQuery1.7开始，不推荐使用

live

方法

相关文档

• jQuery

  数据

  -
• jQuery

  live

  （已弃用）-
• jQuery

  on

  （绑定事件的新方法）——

---

这里有几件事

map

通常用于将函数应用于集合中的所有元素
比如说,

a = [1,2,3,4]
$.map(a, function(e, i) {
  return e + 1;
});
# => [2,3,4,5]

相反，您要查找的是

每个
，它允许您在元素集合上进行迭代

a = [1,2,3,4]
$.each(a, function(e, i) {
  if(e % 2 == 0) {
    console.log(e);
  }
});
# => 2
# => 4

但出现错误的原因是
selectedPopUp=$（this）

这意味着您正在将DOM元素（
thisPopUp
）与jQuery选择器（
$（this）
）进行比较

下面是一个JSFIDLE，其中有一个工作示例：

最后，出于好奇-您需要做什么才能从列表中选择元素？
如果组件具有正确的逻辑，您可以尝试使用jquery函数获取锚的索引，然后将其与
.map（）
函数的
i
索引进行比较

$('body').on('click','.popup', function() {

   var selectedPopUp = $(this);

   //get all the popups 
   var popupList = $('.popup');
   $.map(popupList, function(thisPopUp, i) {
      console.log(thisPopUp + ' = ' + selectedPopUp.index() + ' y i = ' + i);

      if (selectedPopUp.index() == i) { 
         alert('you selected me!')
      }
   });
});​

这是一个有效的
@Chris:Popuplist=[a.popupObj#，a.popupObj#]，这就是为什么我认为我可以通过它进行映射并获得匹配，但是当我记录一个映射项（thisPopUp）时，我得到了：Chris：再次查看问题，我输入了一个错误-类是.popup，thisPopUp是该类的一个元素。我打字太慢，你读得太快b但是rel属性可能正是我需要的。@PruitIgoe还注意到，从jQuery 1.7开始，您应该使用
on
绑定事件，而不是
live
。我还是忘了。。。更新答案：）@Chris他能避免使用jquery.index（）添加rel吗？（如果在同一级别没有其他锚当然可能会干扰）不，我不认为基于索引是最好的主意——数据属性是最好的路线。索引（元素在DOM中的“顺序”）不是不变的；它可能会被其他脚本，甚至是浏览器插件修改。这两种方法都可能通过添加或更改元素造成严重破坏，从而中断索引并导致数据与DOM不同步。您最好尽可能明确，要么使用指向某些json数据中的键的rel id，要么将数据实际放入HTML标记中。这样做并不奇怪，也没有理由避免。我正在一个巨大的定制框架内进行一些iPad优化。每个屏幕（模板）都有一个page_内容对象，该对象本身也有按钮{}、文本块{}、弹出窗口{}等对象。弹出窗口[0]将包含该弹出窗口的属性，因此，当用户点击弹出链接时，我需要确定它是哪个索引弹出，这样我就可以将它与正确的弹出属性相匹配…这该死的东西很好，同时又很复杂，没有很好的文档记录，我通常是一个obj-c人，试图通过jquery工作…：D
$('body').on('click','.popup', function() {

   var selectedPopUp = $(this);

   //get all the popups 
   var popupList = $('.popup');
   $.map(popupList, function(thisPopUp, i) {
      console.log(thisPopUp + ' = ' + selectedPopUp.index() + ' y i = ' + i);

      if (selectedPopUp.index() == i) { 
         alert('you selected me!')
      }
   });
});​