我可以爲多個ID定義一個JQuery函數嗎？可能作爲某種數組？

Question

jQuery中，我需要爲了做一些事情來定義一個小功能，也許如下：

$(function(){ 
    $('#clickThis').click(function(e) { 
     $("#showThis").doSomething(); 
    }); 
}); 

這很簡單，當我點擊#clickThis，我想要的東西與#showThis發生。但是現在讓我們說，我不僅需要在靜態的地方使用這個函數，而且還需要像動態列表這樣的動態地方。每個用戶需要個人#clickThis<userid>，然後用#showThis<userid>完成一些工作，其中<userid>是一個通用用戶標識。

如何在JQuery中正確定義函數，以便我可以對所有列出的用戶使用此函數？我可以在某種數組中定義ID（例如<div id="clickThis[3]">，並讓JQuery與此相處嗎？）

Answer 1

您應該考慮使用類的元素，然後將該類作爲插件的查詢選擇器來使用。

例如：

<a class="myLink" href="#">a</a> 
<a class="myLink" href="#">a2</a> 

然後，您可以使用以下的jQuery：

$('.myLink').on('click', function(e) { 
    $("#showThis").doSomething(); 
}); 

您也可以通過衆多的ID添加到jQuery的構造函數使用逗號，例如：

$('#id1, #id2, #etc') 

您可以使用功能：

$('#id1').add('#id2'); 

---

或者，你可以使用一個<ul>元素，然後委託click事件中它的動態<li>項目。例如，考慮下面的標記：

<ul class="mylist"> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
</ul> 

您可以使用on()與ul.mylist，因爲.mylist是最接近靜態父：

$('ul.mylist').on('click', 'li', function(e) { 
    $("#showThis").doSomething(); 
}); 

使用最後一個例子可能是最好的解決方案。它將處理在客戶端添加到DOM的任何<li>元素上的click事件（例如可能通過jQuery或原始JavaScript）。

---

如果您需要訪問該事件處理程序內id屬性（比如你想從格式user4訪問用戶ID，您可以使用：

<a class="myLink" id="user1" href="#">User 1</a> 
<a class="myLink" id="user2" href="#">User 2</a> 
<a class="myLink" id="user3" href="#">User 3</a> 

你的jQuery反過來會看起來像：

$('.myLink').on('click', function(e) { 
    var userId = this.id.replace('user', ''); 
}); 

這可能隨後又被用來生成另一選擇爲doSomething()，例如：

$('.myLink').on('click', function(e) { 
    var userId = this.id.replace('user', ''); 
    $('#showThis'+userId).doSomething(); 
}); 

這裏是jsFiddle Demo。

Answer 2

我會在這些元素中的每一個上使用一個類而不是唯一的ID，然後可以將這些元素作爲目標利用所使用的每個元素的辛格運河類

但是，如果你真的想使用元素的數組來對付它們，你可以用逗號：

$('#clickThis1, #clickThis2, etc')... 

Answer 3

使用類而不是ID例如：

$('.clickThis').click(function(){ 
    var idd = $(this).attr('id'); // You will get id of the element you have clicked 
}); 

Answer 4

由於您的列表是動態的，你可以使用屬性選擇。下面是例子。

$("div[id^='clickThis']").click(function(e) { 
    var userId = $(this).attr('id'); 
    userId = userId.replace('clickThis',''); 
    $("#showThis" + userId).doSomething(); 
}); 

Answer 5

，你可以添加一個類，每個格，例如添加class="myClass"

<div id="ClickThis3" class="myClass"> 
<div id="ClickThis4" class="myClass"> 
<div id="ClickThis5" class="myClass"> 

然後在jQuery的

$(".myClass").click(function(){ 
var id = $(this).attr('id'); 
id = id.replace("ClickThis", ""); 
$("#showThis"+id).doSomething(); 
});