Простой многоразовый JavaScript toggle() скрипт?

Question

Я изучаю JavaScript и не знаю, как решить простой фрагмент кода многократного использования.

Что мне нужно, это часть кода, которая скроет() # body01, # body02, # body03, 04,05 и т. Д. (Все они). Затем, когда я нажимаю title01, я понимаю, что хочу toggle() body01. Если я нажму кнопку title02, он будет переключать() body02 и так далее.

<a id="title01">Title 1</a> 
<div id="body01">Body content for Title 1</div> 

<a id="title02">Title 2</a> 
<div id="body02">Body content for Title 2</div> 

<a id="title03">Title 3</a> 
<div id="body03">Body content for Title 3</div> 

Извините, если это было задано, я не смог его найти или выяснить сам.

Спасибо!

Answer 1

Если вы используете JQuery (если нет, то вы должны), это так просто, как это:

$('[id^=title]').click(function(){ 

    var tmp = $(this).attr('id').split("title"); 
    $('#body'+tmp[1]).toggle(); 

}); 

Answer 2

Вы можете сделать, как это с JQuery, используя toggle метод:

$(function(){ 
    $("[id^=title]").click(function(){ 
    $(this).next().toggle(); 
    return false; // prevent moving down or going to link 
    }); 
}); 

Answer 3

Добавить классы ваши элементы DOM, например:

<a class="title" id="title01" href="">Title 1</a> 
<div class="body" id="body01">Body content for Title 1</div> 

<a class="title" id="title02" href="">Title 2</a> 
<div class="body" id="body02">Body content for Title 2</div> 

<a class="title" id="title03" href="">Title 3</a> 
<div class="body" id="body03">Body content for Title 3</div> 

Затем вы можете добавить функциональные возможности переключателя следующим образом:

$('.title').click(function(e){ 
    e.preventDefault(); 
    $(this).next('.body').toggle(); 
}); 

Вот демо для accordion like jQuery functionality

Answer 4

разработчики слишком часто новый JS идти прямо в JQuery без изучения JavaScript как язык первого. Вы определенно должны изучить хотя бы какой-то простой JavaScript, чтобы вы могли лучше понять и использовать мощные функции jQuery. Лучший способ переключиться - это установить и удалить класс, а не устанавливать свойство стиля для элемента. Сказав это, вы можете сделать что-то подобное.

.hidden {дисплей: нет; }

<div> 
     <a id="title01" class="toggler">Title 1</a> 
     <div class="body" id="body01">Body content for Title 1</div> 

     <a id="title02" class="toggler">Title 2</a> 
     <div class="body" id="body02">Body content for Title 2</div> 

     <a id="title03" class="toggler">Title 3</a> 
     <div class="body" id="body03">Body content for Title 3</div> 
    </div> 

    <script> 
     // set your initial variables 
     // ideally you will put these in a function which is not 
     // exposed to the global object 
     var togglers = document.getElementsByTagName('a'), 
      divs = document.getElementsByTagName('div'), 
      i, j; 

     // here you loop through your a elements and if they have 
     // a class of toggler you assign the onclick event to a toggle function 
     for (i = 0; i < togglers.length; i += 1) { 
      if (togglers[i].className == 'toggler') { 
       togglers[i].onclick = toggle; 
      } 
     } 

     function toggle() { 
      // here you will cache the variable toToggle 
      // which is the div you want to toggle 
      var toToggle; 

      // loop through all divs and if they have a class of body 
      // you hide it 
      for (j = 0; j < divs.length; j += 1) { 
       if (divs[j].className == 'body') { 
        divs[j].className += ' hidden'; 

        // this is tricky for a beginner. nodeType 1 is an element node 
        // nextSibling will get the nextSibling but if there is white space 
        // in your document it will return a text node when you have to toggle 
        // an element node. this just ensures that it will keep going until it 
        // finds and element node 
        if (this.nextSibling.nodeType !== 1) { 
         toToggle = this.nextSibling.nextSibling; 
        } 
        // then you toggle it by removing the hidden class 
        toToggle.className = 'body'; 
       } 
      } 
     } 

    </script> 
</body> 

и вот несколько ссылок, чтобы обратиться к NODETYPE и следующему собрата. https://developer.mozilla.org/en/nodeType

https://developer.mozilla.org/En/DOM/Node.nextSibling