如何在 jQuery 中为多个 ID 附加单击处理程序并在处理程序中标识 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>

默认情况下New Delhi需要显示详细信息。当我单击Jaipur时，我想改为显示Jaipur详细信息。当我再次单击New Delhi时，我只需要显示New Delhi详细信息。该行为类似于 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

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

$（'div[name="destinationContent"][id=this.id]'）.show（）;

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

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

PS：如果我用"2"替换 this.id，它工作正常。在控制台中，当我输出"this'id"时，它返回"2"。所以，我不确定如何解决这个问题。

---

另外，有人可以向我推荐一种对类似div 进行分组的好方法（我正在使用名称对相似的div 和 id 进行分组以识别该组中的元素）？

Answer 1

首先，id是唯一标识符，并且具有相同ID的多个元素可能会导致jQuery中的不良行为。其次，id不能（有效）以数字开头，除非您的页面具有HTML5文档类型。

所以关于你遇到的问题...

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

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

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

您还可以利用 destinationContent 上的类属性而不是自定义名称，以便您的 jQuery 选择器更容易编写（可以使用 （点） . 访问类选择器），例如在此 jsFiddle 中

如果详细信息始终与标题的顺序相同，则可以使用元素的索引简单地选择与标题相同的目标内容，例如：

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

.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();
    });
});​

Answer 2

首先，数字 ID 不是一个好主意。

其次，按以下格式提供您的divs ID：我的分区-1MyDiv-2 等

然后，用户

$("[id^='MyDiv']").click(function(){ ... });

这将在所有 Id 从 MyDiv 开始的div 上挂钩事件

最后，在点击功能

var id = $(this).attr("id").split("-")[1];

这将在变量 id 中为您提供数字 id。您可以使用它来决定要显示哪个div 以及要隐藏哪个div

您可以通过为您的联系人提供类似的 ID，例如"MyContent-1"等来进一步自动化

然后你可以简单地将 id 附加到 "MyContent" 并调用 show（）

$("[id^='MyContent']").hide()
$("#MyContent-"+id).show()

Answer 3

您不能在页面中重复 ID，并且 ID 在 html4 中不应是数字

我正在将第一组 DIV 中的 ID 更改为 data- 属性，也将name更改为类

<div class="destinationName" data-id="1">NEW DELHI</div>  
<div class="destinationName" data-id="2">JAIPUR</div>

.JS

$('.destinationName').click(function(){
     /* change other "name" attributes to class */
     $('.destinationContent').hide();  
     var id= $(this).data('id');
     $('#'+id).show();
 })

Answer 4

永远不要重复 id，因此我没有使用任何属性并制作了这个

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