Question

我的问题很容易解释，但很难（对我而言）要解决一个链接必须隐藏（或切换）具有相同ID的几个

<div class="buttons">
<a  id="showall">All</a>
<a  class="showSingle" target="1">Morning</a>
<a  class="showSingle" target="2">APM</a>
<a  class="showSingle" target="3">Night</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2a</div>
<div id="div2" class="targetDiv">Lorum Ipsum2b</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>

在这个例子中

<a  class="showSingle" target="2">APM</a>

应显示

<div id="div2" class="targetDiv">Lorum Ipsum2a</div>
<div id="div2" class="targetDiv">Lorum Ipsum2b</div>

使用这个jQuery

jQuery(function(){
         jQuery('#showall').click(function(){
               jQuery('.targetDiv').show();
        });
        jQuery('.showSingle').click(function(){
              jQuery('.targetDiv').hide();
              jQuery('#div'+$(this).attr('target')).show();
        });
});

JS Fiddle test

Answer 1

您可以使用rel而不是id

http://jsfiddle.net/XwN2L/3564/

$(function(){
         $('#showall').click(function(){
               jQuery('.targetDiv').show();
        });
        $('.showSingle').click(function(){
              var self = $(this);
              $('.targetDiv').hide();
              $('.targetDiv[rel=div' + self.attr('target') +']').show();
        });
});

HTML

<div rel="div1" class="targetDiv">Lorum Ipsum1</div>
<div rel="div2" class="targetDiv">Lorum Ipsum2a</div>
<div rel="div2" class="targetDiv">Lorum Ipsum2b</div>
<div rel="div3" class="targetDiv">Lorum Ipsum3</div>

或者您甚至可以使用类，问题是您有多个具有相同名称的ID。 ID必须是唯一的

Answer 2

首先，您应该使用类而不是多个ID，如评论中已提到的那样。还有一种方法可以做到这一点。尝试此选择具有相同ID的所有元素。

$('div[id="div2"]')

它会按预期给你2个div。这是JSBin Demo

PS：我发布这个答案只是为了帮助其他人提供替代方案。我不打算鼓励在代码中使用不良做法。

Answer 3

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
div[class]{display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.showSingle').click(function(){
        $('div[class]').hide()
        var id=$(this).attr('target')
        $('.div'+id).show()
        })
    $('#showall').click(function(){
        $('div[class]').show()
        })
})
</script>
</head>
<body>

<div id="buttons">
<a  id="showall">All</a><br/>
<a  class="showSingle" target="1">Morning</a><br/>
<a  class="showSingle" target="2">APM</a><br/>
<a  class="showSingle" target="3">Night</a><br/>
</div>

<div class="div1">Lorum Ipsum1</div>
<div class="div2">Lorum Ipsum2a</div>
<div class="div2">Lorum Ipsum2b</div>
<div class="div3">Lorum Ipsum3</div>
</body>
</html>

用jquery显示/隐藏相同的div id

3 个答案: