Попытка скрыть все видимые разделы и показать только выбранный

#javascript #html #dom-events #toggle

#javascript #HTML #dom-события #переключить

Вопрос:

Следующий код работает для включения и выключения видимости, но я хочу иметь возможность скрывать любой видимый div и показывать только тот, который виден. Вот HTML:

 <div id="main">

    <div id="hiddena">
    </div>
    
    <div id="hiddenb">
    </div>
    
    <div id="hiddenc">
    </div>
    
    <div id="hiddend">
    </div>
    
    <div id="hiddene">
    </div>

</div>

<div id="buttona">
    <button type=submit onclick="switchVisible('hiddena');"></button>
</div>

<div id="buttonb">
    <button type=submit onclick="switchVisible('hiddenb');"></button>
</div>

<div id="buttonc">
    <button type=submit onclick="switchVisible('hiddenc');"></button>
</div>

<div id="buttond">
    <button type=submit onclick="switchVisible('hiddend');"></button>
</div>

<div id="buttone" class="tall">
    <button type=submit onclick="switchVisible('hiddene');"></button>
</div>

И вот сценарий…

 <script type="text/javascript">

function switchVisible(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

</script>

Есть ли у кого-нибудь какие-либо предложения или дополнения к сценарию, которые могли бы это сделать?

1. Вы должны дать им всем общее имя класса, тогда вы сможете выбрать все элементы с этим классом и скрыть их все. Затем вы просто обрабатываете тот, который вы выбрали.

Ответ №1:

было бы проблемой скрыть их все сразу, а затем отобразить только тот, который вы хотите?

 function hide_them() {
    var divsList = ["hiddena", "hiddenb", "hiddenc", "hiddend", "hiddene"]
    divsList.forEach(function (element) {
        element.style.visibility = "hidden";
    });
}

наконец, просто вызовите функцию hide_them в начале вашей функции:

 function switchVisible(id) {
   hide_them();
   var e = document.getElementById(id);
   e.style.display = 'block';
}

Другой способ — выбрать элементы по тегу и скрыть их все (это не очень хороший способ, потому что, когда ваш код растет, это может вызвать нежелательные проблемы)

Ответ №2:

Несколько предложений здесь

Никогда не смешивайте свою разметку с javascript. Вы можете рассмотреть возможность привязки onclick к javascript с помощью addeventlistener или jQuery bind
Идентификатор всегда должен быть уникальным. Если вы хотите иметь несколько элементов с одинаковыми именами, вы можете рассмотреть возможность использования class , потому что document.getelementsbyclassname всегда возвращает массив 3 .В вашей логике отображения / скрытия вы проверяете, является ли элемент «блоком» или «нет». Когда элемент отображается, по умолчанию element.style.display будет «» не «блокировать»

проверьте следующий фрагмент кода

 function switchVisiblebyId(id){
  var element=document.getElementById(id);
var displayStyle=element.style.display;
  if(displayStyle==="" || displayStyle==="block"){
    element.style.display="none";
  }
  else{
    element.style.display="";
  }
}

 <div id="hiddena">
  div1
    </div>

    <div id="hiddenb">
      div2
    </div>

    <div id="hiddenc">
      div3
    </div>

    <div id="hiddend">
      div4
    </div>

    <div id="hiddene">
      div5
    </div>


<div id="buttona">button1
    <button type=submit onclick="switchVisiblebyId('hiddena');"></button>
</div>

<div id="buttonb">button2
    <button type=submit onclick="switchVisiblebyId('hiddenb');"></button>
</div>

<div id="buttonc">button3
    <button type=submit onclick="switchVisiblebyId('hiddenc');"></button>
</div>

<div id="buttond">button4
    <button type=submit onclick="switchVisiblebyId('hiddend');"></button>
</div>

<div id="buttone" class="tall">button5
    <button type=submit onclick="switchVisiblebyId('hiddene');"></button>
</div>

Надеюсь, это поможет