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 [名称= “destinationContent”] [ID = this.id]'）显示（）;

this.id是造成问题的原因。

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

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

此外，有人可以推荐我一个很好的方法来分组相似的div（我使用名称来分组相似的div和id来识别该组中的元素）？

Answer 1

首先id是unique identifier，并且具有相同ID的多个元素可能会导致jQuery中出现意外行为。其次，除非您的网页包含HTML5 doctype，否则id无法（有效地）以数字开头。

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

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

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

但是，这不能解决重复的id问题。最好为每个对使用唯一的class属性将<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(); }); });

Answer 2

首先，Numeric Id不是一个好主意。

其次，以下列格式提供您的divs ID： MyDiv-1 MyDiv-2等等

然后，用户

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

这将挂钩从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>

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

4 个答案:

HTML

的JavaScript