1

我对 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 进行分组，以识别该组中的元素）？

4

4 回答 4

2

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

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

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

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

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

您还可以利用destinationContent 上的class属性而不是自定义名称，以便您的 jQuery 选择器更容易编写（可以使用 (dot) 访问类.选择器），例如在这个 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();
    });
});​
于 2012-06-04T07:56:37.177 回答
1

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

其次，按照以下格式提供您的 div id：MyDiv-1 MyDiv-2 等等

那么，用户

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

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

最后，在点击功能中

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

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

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

然后您可以简单地将 id 附加到“MyContent”并调用 show()

$("[id^='MyContent']").hide()
$("#MyContent-"+id).show()
于 2012-06-04T07:54:37.823 回答
1

您不能在页面中重复 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();
 })
于 2012-06-04T07:55:28.603 回答
0

永远不要重复 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>
于 2012-06-04T07:55:58.650 回答