如何显示元素编号并隐藏其他

-1

<ul> 
<li id="test1">Test1</li> 
<li id="test2">Test2</li> 
<li id="test3">Test3</li> 
</ul> 

<div class=test1">Test 1, okay!</div> 
<div class=test2">Test 2, okay!</div> 
<div class=test3">Test 4, okay!</div>

如果我点击的李，具体DIV（具有相同的类）应该出现，其他人应该隐藏。我试过一些JavaScript，但它似乎不工作。

$('.photo-select li').click(function() { 
      var productid = $(this).attr('id'); 
      $('.productinfo:not(.'+productid+')').hide(); 
      $('.productinfo:is(.'+productid+')').show(); 
});

来源

2016-02-09 Jonas

您有重复的'id'属性，这是无效的。 'id'对于'document'中的每个元素必须是唯一的。 –

......解决方案通常是使用类和/或“数据”属性。 –

无论如何，它不起作用... – Jonas

首先你有重复的id属性是无效的。 id对于document中的每个元素必须是唯一的。其次，您可以通过使用常用类和data属性来实现您所需的内容，以指定a和div元素之间的关系。试试这个：

<ul> 
    <li class="foo" data-rel="test1">Test1</li> 
    <li class="foo" data-rel="test2">Test2</li> 
    <li class="foo" data-rel="test3">Test3</li> 
</ul> 

<div class="content" id="test1">Test 1, okay!</div> 
<div class="content" id="test2">Test 2, okay!</div> 
<div class="content" id="test3">Test 4, okay!</div>

.content { 
    display: none; 
}

$('.foo').click(function() { 
    $('#' + $(this).data('rel')).show().siblings('div').hide(); 
})

Working example

如果愿意，你可以否定需要对data属性和id，而是各自的容器中涉及通过其索引的元素：

<ul> 
    <li>Test1</li> 
    <li>Test2</li> 
    <li>Test3</li> 
</ul> 

<div id="content-container"> 
    <div>Test 1, okay!</div> 
    <div>Test 2, okay!</div> 
    <div>Test 4, okay!</div> 
</div>

#content-container > div { 
    display: none; 
}

$('li').click(function() { 
    $('#content-container').find('div').eq($(this).index()).show().siblings().hide(); 
})

Example fiddle

注意，而第二实例包更短，它可以说是不太可靠的。这将取决于结构和可能改变你的HTML的结构。不过，要么是完全可以接受的解决方案。

来源

2016-02-09 16:03:47

至少我已经忍受了忍者10秒:) –

浏览器只能看到一个ID的第一次出现，因为它们将它们存储在快速查找仅具有一个针对每个键值元件。

使用的类和属性data-避免这种：

<ul> 
<li class="clickme" data-target="test1">Test1</li> 
<li class="clickme" data-target="test2">Test2</li> 
<li class="clickme" data-target="test3">Test3</li> 
</ul> 

<div id=test1">Test 1, okay!</div> 
<div id=test2">Test 2, okay!</div> 
<div id=test3">Test 4, okay!</div>

和代码变为：

$('.photo-select .clickme').click(function() { 
     var productid = $(this).data('target'); 
     $('.productinfo').not(productid).hide(); 
     $(productid).show(); 
});

的代码3线可被缩短，但此旨在是示例性的。

最后一个问题是隐藏初始状态。您可以添加style="display:none"或默认使用CSS对其进行设置。

来源

2016-02-09 16:03:37

你的代码几乎是没有的，只是一些小的调整：

$('li.photo-select').click(function() { 
    var productid = $(this).attr('id'); 
    $('div.productinfo:not(.' + productid + ')').hide(); 
    $('div.productinfo.'+productid).show(); 
});

这里的fiddle

来源

2016-02-09 16:57:36

如何显示元素编号并隐藏其他

回答

相关问题