jQuery如何设置以使一组按钮显示或隐藏一组相关元素

debugcn 发表于 Dev

战胜袋熊

我有4个按钮和4个图像。按钮和图像之间存在某种关系，因此单击按钮＃1时，只有div＃1应该可见，而div＃2，＃3和＃4隐藏。与其他任何按钮相同-显示相关的div并隐藏其他按钮。这与菜单没有特别关系，但我认为这也是一种适用于菜单的模式。

我目前通过以下每个按钮id的jquery on-click函数来实现此目的，但是代码是重复的。

$("#button1").on("click", function(e) {

    $("#div1").show()
    $("#div2").hide()
    $("#div3").hide()
    $("#div4").hide()

})

将来，我们可能会在网站上添加更多按钮和div。那么，如何才能更灵活地做到这一点呢？

战胜袋熊

这种方法使用将类添加到元素中而不与样式相关但用作组标识符的原理：

向所有按钮添加通用类，例如myButtonClass
向所有div添加通用类，例如myDivClass
向每个关联的div添加一个与控制按钮ID匹配的类。egfor按钮＃showdiv1给＃div1一个额外的类，即class =“＃showdiv1”。
现在，如下修改您的jquery：

    $(".myButtonClass").on("click", function(e){
        // hide all the divs
        $(".myDivClass").hide()  
        // show the div with class matching button element id attr
        $("." + $(this).prop("id")).show()    
    })

.myDivClass
{
  display: none;
 }

<!-- the following classes are for illustration only -->
.showDiv1 { width: 100px; height: 100px; background-color: red;}
.showDiv2 { width: 100px; height: 100px; background-color: lime;}
.showDiv3 { width: 100px; height: 100px; background-color: gold;}
.showDiv4 { width: 100px; height: 100px; background-color: blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div >
  <button id="showDiv1" class="myButtonClass">Show Div #1</button>
  <button id="showDiv2" class="myButtonClass">Show Div #2</button>
  <button id="showDiv3" class="myButtonClass">Show Div #3</button>
  <button id="showDiv4" class="myButtonClass">Show Div #4</button>
</div> 

<div id="div1" class="showDiv1 myDivClass">This is Div # 1</div>
<div id="div2" class="showDiv2 myDivClass">This is Div # 2</div>
<div id="div3" class="showDiv3 myDivClass">This is Div # 3</div>
<div id="div4" class="showDiv4 myDivClass">This is Div # 4</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。