Question

在this示例后，我使用类似示例的代码制作了一个测试php文件

<div class="buttons">
<a  id="showall">All</a>
<a  class="showSingle" target="1">Div 1</a>
<a  class="showSingle" target="2">Div 2</a>
<a  class="showSingle" target="3">Div 3</a>
<a  class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>




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

该示例工作正常但如果多个div具有id例如＆＃34; id =＆＃39; div1＆＃39;＆＃34;，其余的div将不会显示

例如

 <div class="buttons">
 <a  id="showall">All</a>
 <a  class="showSingle" target="1">Div 1</a>
 <a  class="showSingle" target="2">Div 2</a>
 <a  class="showSingle" target="3">Div 3</a>
 <a  class="showSingle" target="4">Div 4</a>
 </div>

 <div id="div1" class="targetDiv">Lorum Ipsum1</div>
 <div id="div1" class="targetDiv">Some content</div>
  <div id="div1" class="targetDiv">Some content 1</div>
 <div id="div2" class="targetDiv">Lorum Ipsum2</div>
 <div id="div2" class="targetDiv">Different content 1</div>
 <div id="div2" class="targetDiv">different content 2</div>
 <div id="div3" class="targetDiv">Lorum Ipsum3</div>
 <div id="div4" class="targetDiv">Lorum Ipsum4</div>

当我点击一个目标= 1的按钮时，只有第一个div为id =＆＃34; div1＆＃34;将被展示，其余的都是隐藏的我希望所有div都有id =＆＃34; div1＆＃34;显示

我见过一些例子，但我不明白我错过了什么

提前致谢

vaggelis

Answer 1

根据定义，ID必须是唯一的。

如果您需要对项目进行分组，可以使用多个类：

<div id="div1" class="targetDiv group1">Lorum Ipsum1</div>
<div id="div2" class="targetDiv group1">Some content</div>
<div id="div3" class="targetDiv group1">Some content 1</div>
<div id="div4" class="targetDiv group2">Lorum Ipsum2</div>
<div id="div5" class="targetDiv group2">Different content 1</div>
<div id="div6" class="targetDiv group2">different content 2</div>
<div id="div7" class="targetDiv group3">Lorum Ipsum3</div>
<div id="div8" class="targetDiv group3">Lorum Ipsum4</div>

然后

$(".targetDiv.group1").hide();
$(".targetDiv.group2").hide();
$(".targetDiv.group3").hide();

Answer 2

第二个示例中的HTML无效，因为您不能拥有多个具有相同class的元素。要解决此问题，请使用data-*属性对目标div元素进行分组。

另请注意，向元素添加自己的自定义属性是无效的，并且可能导致HTML呈现和JS出现问题。而是使用jQuery(function($) { $('#showall').click(function() { $('.targetDiv').show(); }); $('.showSingle').click(function() { $('.targetDiv').hide(); $('.div' + $(this).data('target')).show(); }); });属性来存储带有元素的自定义数据。试试这个：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
  <a id="showall">All</a>
  <a class="showSingle" data-target="1">Div 1</a>
  <a class="showSingle" data-target="2">Div 2</a>
  <a class="showSingle" data-target="3">Div 3</a>
  <a class="showSingle" data-target="4">Div 4</a>
</div>

<div class="div1 targetDiv">Lorum Ipsum1</div>
<div class="div1 targetDiv">Some content</div>
<div class="div1 targetDiv">Some content 1</div>
<div class="div2 targetDiv">Lorum Ipsum2</div>
<div class="div2 targetDiv">Different content 1</div>
<div class="div2 targetDiv">different content 2</div>
<div class="div3 targetDiv">Lorum Ipsum3</div>
<div class="div4 targetDiv">Lorum Ipsum4</div>

＆＃13;

 <a   class="btn btn-primary" data-toggle="modal" data-target="#moneyModal">
 <span class="glyphicon glyphicon-money glyphicon-white"></span>Change</a>

<div class="modal fade" id="moneyModal" role="dialog">
        <div class="modal-dialog">

        <form method="post" action="change-goal">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Change Goal</h4>
                </div>
                <div class="modal-body">
                    <p>Please enter a new number.</p>
                </div>
                <div class="modal-body">
                    <input class="form-control" name="newGoal" id="newGoal">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" >Save</button>
                </div>
            </div>
        </form>
        </div>
    </div>

＆＃13;

用jquery显示/隐藏多组div

2 个答案: