Как сделать видимым блок div?

Question

[fenucss]

Собственно есть код, который работает:

window.onload=function(){document.querySelector("input").oninput=function(){var elements=document.querySelectorAll("#sampleform div.allDiv");Array.prototype.forEach.call(elements,function(el,i){el.style.display='none';});
if(document.getElementById('textValue').value==1){var div=document.getElementById('div2'); div.style.display='none'; var div=document.getElementById('div1'); div.style.display='block';}
if(document.getElementById('textValue').value==2){var div=document.getElementById('div1'); div.style.display='none'; var div=document.getElementById('div2'); div.style.display='block';}
}}

<input class="inputTypeText" type="text" value="" size=57 name="textValue" id="textValue" placeholder="Введите текстовое значение">
	<div class="allDiv" id="allDiv1">
	<div id="content">
  <div class="allDiv" id="div1">	
  <div class="post inactive"> 
  <div class="title"> 
  <h3>Заголовок блока</h3>  
  </div>
  <div class="entry" style="display:none;">
  <p><a href="#" title="">1</a></p>
  <p><a href="#" title="">2</a></p>
  <p><a href="#" title="">3</a></p>
  </div>  
  </div>
  </div>
 <div class="allDiv" id="div2">  
  <div class="post inactive"> 
  <div class="title"> 
  <h3>Заголовок блока</h3>  
  </div>
  <div class="entry" style="display:none;">
  <p><a href="#" title="">1</a></p>
  <p><a href="#" title="">2</a></p>
  <p><a href="#" title="">3</a></p>
  </div>  
  </div>
  </div>
</div>
</div>

Если таких блоков будет штук 100, то при написании условий скрывать все блоки (display:none;) и выводить какой-то один очень долго. Проблема в том, что не получается скрыть блок allDiv1 и при этом вывести например блок div1 Как решить данную проблему?)

Answer 1

[Максим Е]

Используйте jQuery:

$(".allDiv").hide(); // скрыли все
$("#div1").show(); // показали, что нужно по ID

Пример HTML для скриптов выше:

<div>
<div class="allDiv" id="div1">CONTENT</div>
<div class="allDiv" id="div2">CONTENT</div>
<div class="allDiv" id="div3">CONTENT</div>
</div>

следовательно класс allDiv должен быть у всех дивов, а div1 - у нужного. можно использовать this

Comments

[fenucss]

Таким способом также пробовал, однако все блоки скрываются, но при этом не получается показать например div1

[Максим Е]

fenucss: если выделяете по ID, то тогда $("#div1").show();

[fenucss]

Максим Креативный: аналогичный результат:(

[Максим Е]

fenucss: значит что-то делаете на так. позже обновлю ответ.

[Виталий Инчин ☢]

Пропаганда jQuery!!! x)

[Максим Е]

Виталий Инчин ☢: она же не запрещена :)

[fenucss]

Максим Креативный: вообщем все прекрасно работает, если блок вынести за пределы класса allDiv. Если поместить обратно ничего не работает

[Максим Е]

fenucss: так у Вас allDiv в allDiv вложен.

[fenucss]

Максим Креативный: ахах) точно-точно.. Видимо уже пора на отдых) Спасибо за помощь:)