我可以为多个Id定义一个JQuery函数吗?可能是某种数组

Question

在JQuery中，我需要定义一个小函数来做一些事情，可能如下：

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

很简单，当我点击#clickThis时，我希望#showThis发生一些事情。但现在让我们假设我不仅在静态的地方需要这个函数一次，而且在像用户列表这样的动态的地方也需要这个函数。这些用户中的每一个都需要一个单独的#clickThis<userid>，然后对#showThis<userid>做一些事情，其中<userid>是通用的用户ID。

如何在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')

或者您可以使用add()功能：

$('#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演示。

Answer 2

您可以为每个div添加一个类，例如添加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();
});

Answer 3

我会在每个元素上使用一个类，而不是唯一的id。然后，您可以使用每个元素使用的singel类来定位这些元素中的每一个。

但是，如果你真的想使用元素数组来瞄准它们，你可以使用逗号：

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

Answer 4

使用类而不是id示例：

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

Answer 5

由于列表是动态的，因此可以使用属性选择器。以下是示例。

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