jquery - 如何为多个 ID 附加单击处理程序并在 jQuery 中识别处理程序中的 ID？

Question

我对 jquery 很陌生，有什么简单的方法可以做到这一点:

我的服务器端代码会输出这样的 html:

<div name="destinationName" id="1">NEW DELHI</div>  
<div name="destinationName" id="2">JAIPUR</div>

<div name="destinationContent" id="1" style=";">NEW DELHI details</div>
<div name="destinationContent" id="2" style="display:none;">JAIPUR details</div>

默认情况下需要显示新德里详细信息。当我点击 Jaipur 时，我想显示 Jaipur 详细信息。当我再次点击新德里时，我只需要显示新德里详细信息。其行为类似于 jquery 选项卡。

Javascript:

<script type="text/javascript">
$(document).ready(function() {
    $('div[name="destinationName"]').click(function(){
        $('div[name="destinationContent"]:visible').hide();
        $('div[name="destinationContent"][id=this.id]').show();
       });
});
</script>

JSFiddle

当我点击斋浦尔时，新德里和斋浦尔都会被渲染。当我调试代码时，

$('div[name="destinationContent"][id=this.id]').show();

this.id 是导致问题的原因。

如何在上面的脚本中引用 this.id ??

PS:如果我将 this.id 替换为“2”，则效果很好。在控制台中，当我输出“this'id”时，它返回“2”。所以，我不知道如何解决这个问题。

<小时/>

另外，有人可以推荐我一种对相似的 div 进行分组的好方法(我使用名称对相似的 div 进行分组，并使用 id 来标识该组中的元素)？

Answer 1

首先是id是 unique identifier并且多个元素具有相同的 ID 可能会导致 jQuery 出现不良行为。其次，id不能(有效)以数字开头，除非您的页面有 HTML5 doctype .

那么关于您遇到的问题...

使用元素id在选择器中，您需要在选择器字符串之外访问它，并将结果与​​选择器的其余部分连接起来，否则它只是字符串的一部分。您看到的错误是正确的，JavaScript 不知道什么 this.id是的，因此以下更改应该可以纠正错误:

$('div[name="destinationContent"][id=' + this.id + ']').show();

但是，这并不能纠正重复的 id问题。最好为每个对使用唯一的类属性来链接 <div>在一起。

您还可以利用destinationContent 上的class 属性而不是自定义名称，以便您的jQuery 选择器更易于编写(class em> 选择器可以使用(点) . )进行访问，例如 this jsFiddle

如果详细信息始终与标题的顺序相同，那么您可以使用元素的索引来简单地选择与标题相同的destinationContent，例如:

编辑:使用不依赖元素索引的替代解决方案更新了代码。

HTML

<h3 class="delhi">NEW DELHI</h3>
<h3 class="jaipur" >JAIPUR</h3>
<hr/>
<div class="destinationContent">
    <div class="delhi">NEW DELHI details</div>
    <div class="jaipur">JAIPUR details</div>
</div>​​​​​​​​​​​​​​​​​​

JavaScript

$(function() {
    var contents = $('.destinationContent div');
    contents.hide();

    $('h3').on('click', function(){
        contents.hide();
        $('.destinationContent div.' + this.className).show();
    });
});​