jQuery Afficher et masquer div

Question

J'ai une page qui aura quelques boutons sur elle et sur un clic d'un bouton que je ai essentiellement besoin d'échanger des divs - je les ai enveloppés dans un parent div avec un id et puis chaque div qui sera remplacé obtiendra son propre id ainsi. J'ai eu ce code pour travailler pour l'échange, mais ce sera fastidieux et pas bon du tout de le faire si nous nous retrouvons avec une trentaine d'appariements.

Comment puis-je nettoyer cela en un clic, le div actif est display: none, et le clic est réglé sur display: block?

Voici mon code jQuery qui fonctionne pour l'instant. Pour cela, je veux afficher le macaroni et le farfalle.

$('#macaroniButton').click(function(){ 
    $('#macaroni').toggle(); 
    $('#farfalle').toggle(); 
}); 

<div id="topchanger"> 
    <div id="farfalle"> 
     ..... 
    </div> 
    <div id="macaroni"> 
     ..... 
    </div> 
</div> 

<div class="circlerow"> 

    <div class="circlepasta" id="macaroniButton"> 
     ...... 
    </div> 

    <div class="circlepasta" id="AnotherButton"> 
     ...... 
    </div> 
    </div> 
</div> 

Answer 1

Vous pouvez donner une classe à tous les div que vous voulez show/hide et avant de manipuler un clic, cacher tous les div avec cette classe. Disons que vous lui donnez une classe « article »:

<div id="topchanger"> 
    <div id="farfalle" class="item"> 
     ..... 
    </div> 
    <div id="macaroni" class="item"> 
     ..... 
    </div> 
</div> 

et votre javascript sera:

$('div.item').click(function(){ 
    $('div.item').hide(); 
    $(this).show(); 
}); 

Notez que $(this) fait référence à l'élément qui vient d'être cliqué.

Espérons qu'il hepls

Answer 2

Vous pourriez commencer par cela. Développez ma réponse en conséquence.

 $('#macaroniButton').click(function(){ 

      $("#macaroni").show().siblings('div').hide(); 

    });