Wie div auf Klick anzeigen?

Question

Das sollte ziemlich einfach sein, aber ich bin nicht so vertraut mit Javascript, also werde ich behindert. Ich habe diesen HTML:

<section class="main-container"> 
    <ul class="landing-list"> 
     <li class="main-headings"> 
      <strong>SERVICES</strong><i class="icon icon-angle-down"></i> 
      <div class="main-blurb" id="blurb-1"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus assumenda, in a quaerat iusto. Reiciendis consequuntur doloribus, sed tenetur aspernatur sunt perspiciatis. Odit non eos laudantium fuga officiis quia eius!</p> 
      </div> 
     </li> 
     <li class="main-headings"> 
      <strong>WHY CHOOSE PMDS?</strong><i class="icon icon-angle-down"></i> 
      <div class="main-blurb" id="blurb-2"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo rerum totam obcaecati at eligendi voluptate tempore aspernatur. Maxime accusantium nobis ab, at voluptatem porro, fugit sed sint fugiat sapiente vel?</p> 
      </div> 
     </li> 
     <li class="main-headings"> 
      <strong>PORTFOLIO</strong><i class="icon icon-angle-down"></i> 
      <div class="main-blurb" id="blurb-3"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio similique aut voluptates, facilis, provident quae cupiditate dolore nisi non accusamus quidem dolorem dicta aliquam, quod temporibus. Quas deleniti, aliquam ab.</p> 
      </div> 
     </li> 
     <li class="main-headings"> 
      <strong>CONTACT</strong><i class="icon icon-angle-down"></i> 
      <div class="main-blurb" id="blurb-4"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, recusandae. Commodi, mollitia autem necessitatibus dicta. Explicabo quam harum, perferendis repellat vel aut, est fugit assumenda blanditiis ratione, doloribus molestiae consequuntur.</p> 
      </div> 
     </li> 
    </ul> 
</section> 

Die Wirkung ich suche ist, dass, wenn einer der .icons geklickt wird, die .main-Klappentext darunter angezeigt wird, und alle anderen .main-blurbs sind versteckt . Hier ist die js ich geschrieben habe:

$('section ul li .icon').click(function() { 
    var i = $(this).index(); 
    $('.main-blurb').hide(); 
    $('#blurb-' + (i+1)).show(); 
}); 

ich dies in einer JS-Datei platziert haben, und erforderlich, um es in meinem application.js. Wenn ich das mache, passiert nichts. Ich habe den Server und all das neu gestartet, und ich frage mich nur, ob ich ein bisschen Syntax fehlt.

Answer 1

Mein Problem war meine Unkenntnis von Javascript.

$(document).ready(function() { 

am Anfang meiner JavaScript-Datei: Ich hatte schließen vergessen. Alles funktioniert jetzt!

Answer 2

var i = $(this).index(); ist immer gleich 1, weil das .icon das 2. Element in jedem <li> ist.

Versuchen:

$('section ul li .icon').click(function() { 
    $('.main-blurb').hide(); 
    $(this).parent().find('.main-blurb').show(); 
}); 

Answer 3

whitout den gesamten Code schwer zu wissen, was los ist. nächsten div unter dem Etikett erhalten i Sie jquery next() Funktion verwenden können:

$('section ul li .icon').click(function() { 
    //hide all divs with main-blurb classes 
    $('.main-blurb').hide(); 
    //show next element with main.blurb class 
    $(this).next('.main-blurb').show(); 
});