Показать / Скрыть несколько DIV одновременно - PullRequest
Новая
       20

Показать / Скрыть несколько DIV одновременно

0 голосов
/ 19 марта 2012

Я хочу разрешить пользователю просматривать содержимое статьи или просматривать только список.Однако, когда я пытаюсь это сделать, он скрывает только первый экземпляр:

HTML 

    <div id="title">Title</div>
    <div id="articlebody">Blah blah blah</div>
    <div id="title">Title 2</div>
    <div id="articlebody">2. Blah blah blah</div>
    <div id="title">Title 3</div>
    <div id="articlebody">3. Blah blah blah</div>
    ... And so on for 10 articles

Javascript, поэтому параметры chage 

    <a href="#" onClick="document.getElementById('articlebody').style.display='none';">View title list only</a>
    <a href="#" onClick="document.getElementById('articlebody').style.display='block';">View the whole body</a>

Как я уже сказал, код будет скрывать тело статьи1, но не остальные.

Ответы [ 5 ]

3 голосов
/ 19 марта 2012

У вашего html есть большие проблемы:

first: id -атрибут должен быть уникальным во всем документе. По этой причине getElementById возвращает только одно значение (первый элемент, найденный в документе).

используйте вместо этого class и соответствующий селектор

getElementsByClassName

секунда: используйте внешнюю функцию при нажатии.

<a onClick="yourfunction()">...</a>

и в блоке скриптов: 

function yourfunction(){
   var el = document.getElementsByClassName(<yourclassname>);
   for (var i = 0; i < el.length; i++){
         el[i].style.display='none';
   }
}

РЕДАКТИРОВАТЬ: по соображениям совместимости вы должны использовать querySelector() или querySelectorAll() (см. Статью по MDN) , так как он поддерживается IE8 +, в то время как getElementsByClassName не поддерживается IE8. Кроме того, он ближе к синтаксису jQuery и, таким образом, более знаком для большинства пользователей webdev;).

2 голосов
/ 19 марта 2012

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

2 голосов
/ 19 марта 2012

У вас не может быть 2 или более элементов с одинаковым идентификатором, что является недопустимым HTML.

Я бы предложил изменить их на классы и использовать jQuery, чтобы скрыть / показать: 

<div class="title">Title</div>
<div class="articlebody">Blah blah blah</div>
<div class="title">Title 2</div>
<div class="articlebody">2. Blah blah blah</div>
<div class="title">Title 3</div>
<div class="articlebody">3. Blah blah blah</div>

<a href="#" onClick="$('.articlebody').hide(); return false;">View title list only</a>
<a href="#" onClick="$('.articlebody').show(); return false;">View the whole body</a>

Более удобный способ - создать прослушиватель событий, то есть вы можете удалить свои атрибуты onClick: 

<div class="title">Title</div>
<div class="articlebody">Blah blah blah</div>
<div class="title">Title 2</div>
<div class="articlebody">2. Blah blah blah</div>
<div class="title">Title 3</div>
<div class="articlebody">3. Blah blah blah</div>

<a href="#" class="viewTitleListOnly">View title list only</a>
<a href="#" class="viewWholeBody">View the whole body</a>

<script type="text/javascript">
    $(function(){
        $(".viewTitleListOnly").click(function(e){
           e.preventDefault(); //Prevents browser adding hash tag to URL
           $(".articlebody").hide();
        });
        $(".viewWholeBody").click(function(e){
           e.preventDefault(); //Prevents browser adding hash tag to URL
           $(".articlebody").show();
        });
    });
</script>
0 голосов
/ 19 марта 2012

Вы не можете надежно повторно использовать id с.

Вместо этого используйте class имена или получайте элементы div по именам тегов.

document.getElementsByClassName("item");

document.getElementsByTagName("div");

0 голосов
/ 19 марта 2012

Вы не можете иметь больше одного элемента с таким же идентификатором в вашем HTML! это может быть легко достигнуто либо помещением всего в элемент-обертку и его скрытием, либо использованием классов и селекторов, таких как в jQuery $('.myclass').hide();

...