Question

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

我目前使用每个按钮ID的jquery on-click函数进行此工作，如下所示，但代码是重复的。

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

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

})

将来我们可能会向网站添加更多按钮和div。那么，我怎样才能以更灵活的方式做到这一点呢？

Answer 1

此方法使用将类添加到元素的原则，其中类与样式无关，但用作组标识符：

为所有按钮添加通用类，例如myButtonClass
为所有div添加通用类，例如myDivClass
向每个关联的div添加与控制按钮id匹配的类。例如按钮#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>

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

1 个答案: