JQuery как настроить, чтобы группа кнопок отображала или скрывала группу связанных элементов

У меня есть 4 кнопки и 4 изображения. Существует связь между кнопками и изображениями, так что при нажатии кнопки #1 должен быть виден только div #1, в то время как divs #2, #3 amd #4 скрыты. То же самое для любой другой кнопки — Показать связанный div и скрыть другие. Это не связано с меню, но я думаю, что это шаблон, который будет применяться там тоже.

В настоящее время я делаю эту работу с функцией jQuery on-click для каждого идентификатора кнопки, как показано ниже, но код повторяется.

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

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

})

В будущем мы можем добавить больше кнопок и дивов на сайт. Итак, как я могу сделать это более гибким способом?

в 12:12

1 ответ

  1. Этот подход использует принцип добавления классов к элементам, где класс не имеет отношения к стилю, но используется в качестве идентификатора группы:

    1. Добавьте универсальный класс ко всем кнопкам, например myButtonClass
    2. Добавьте универсальный класс ко всем divs, например myDivClass
    3. Добавьте к каждому связанному div класс, соответствующий идентификатору управляющей кнопки. e.g.для кнопки #showdiv1 дайте #div1 дополнительный класс как class= «#showdiv1».
    4. Теперь измените свой 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>