的jQuery：匹配項單擊的映射項目

我有一大堆的HREF的像這樣：

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

所以在我的代碼有：

$('.popup').live('click', function() { 

    var selectedPopUp = $(this); 

    //get all the popups 
var popupList = $('.popup'); 

    $.map(popuplist, function(thisPopUp, i) { 

     if (selectedPopUp == thisPopUp) { 
      //do something 
     } 


    }); 

});

我想我能夠在物體這樣搭配起來，但是當我登錄他們這是我所得到的：

selectedPop達：[a.popupObj＃]

thisPopUp：<a class="popupObj" href="#">

我這樣做，因爲我需要的selectedPopup的索引＃因爲有包含所有這些屬性顯示彈出窗口的對象。很顯然，我在這裏以錯誤的方式繼續前進，有人能讓我站直嗎？

感謝

來源

2012-08-14 PruitIgoe

@克里斯：Popuplist = [a.popupObj＃，＃a.popupObj]，這就是爲什麼我想我可以通過它映射並獲得了比賽，但是當我記錄一個映射的項目（thisPopUp）我得到： – PruitIgoe 2012-08-14 18:03:58

好像你正在嘗試一個HTML元素與一組相關的數據，或者至少一個ID匹配。這是一個偉大的時間使用rel屬性：

所以，你的字鏈接應該是這樣的：

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

（順便說一下，不要用href='javascript:void(0);' - 只使用事件對象preventDefault，或返回false）

現在，您的處理程序是這樣的：

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

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

    // code follows 
});

此外，你可以使用的T他data屬性：

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

然後處理程序是這樣的：

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

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

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

試試：http://jsfiddle.net/x4YmG/

另外請注意，你應該開始使用on方法來綁定事件，而不是live 。從jQuery 1.7開始，live方法已被棄用。

相關文檔

jQuery的data - http://api.jquery.com/data/
jQuery的live（不建議使用） - http://api.jquery.com/live/
jQuery的on（綁定事件的新方式） - http://api.jquery.com/on/

來源

2012-08-14 18:04:52

Chris：再次查看問題，我犯了一個錯字 - 類是.popup，並且thisPopUp是一個元素那個班。我輸入太慢，你讀得太快。：D – PruitIgoe 2012-08-14 18:07:27

但是rel prop可能是我需要的。 – PruitIgoe 2012-08-14 18:07:46

@PruitIgoe更新回答:) – 2012-08-14 18:15:04

有一個幾件事情ERE ..

map一般用於收集

例如在功能適用於所有元素，

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

你所尋找的，而不是爲each，它允許您遍歷元素的集合。

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)）。

這裏是一個用的jsfiddle工作的例子：http://jsfiddle.net/28D3h/2/

最後，出於好奇 - 究竟你需要能夠做到這一點實際需要，以便能夠選擇元素淘汰之列？

來源

2012-08-14 18:15:57

我正在爲一些iPad優化工作內建一個巨大的定製框架。每個屏幕（模板）都有一個page_content對象，然後它自身具有諸如按鈕{}，文本塊{}，彈出窗口{}等對象。popup [0]將包含該彈出窗口的屬性，因此當用戶單擊彈出鏈接我需要確定哪個索引彈出它，所以我可以匹配它適當的彈出屬性...該死的事情是好的和令人費解在同一時間，沒有很好的文件，我通常是一個obj-c人嘗試工作我的通過jquery的方式...：D – PruitIgoe 2012-08-14 18:23:16

如果組件具有正確的邏輯，您可以嘗試使用jquery index()函數獲取錨點的索引，然後將其與.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!') 
     } 
    }); 
});

這裏是一個工作example.

來源

2012-08-14 18:36:17

的jQuery：匹配項單擊的映射項目

回答

相關問題