jQuery Element Swap

Question

J'ai 3 divs dont un seul est visible par défaut, ils contiennent chacun des informations sur un produit. Ci-dessous cette divs est une liste de 3 images qui sont des images des produits. Par défaut, bien sûr, le premier élément de la liste est sélectionné et contient class="selected". Lorsqu'une image de produit différente est cliquée, class="selected" se déplace vers cet élément de liste et la div ci-dessus devient cachée et la div contenant les autres informations sur le produit doit apparaître.

J'ai cherché partout un plugin qui peut faire ce que je veux, ils sont tous limités d'une manière ou d'une autre ce qui m'empêche de le faire.

Answer 1

Consultez le code suivant:

<img id="img1" src="1.jpg" desc="d1" class="selected prodImg" /> 
<img id="img2" src="2.jpg" desc="d2" class="prodImg" /> 
<img id="img3" src="3.jpg" desc="d3" class="prodImg"/> 

<div id="d1">description 1</div> 
<div id="d2" class="hidden">description 2</div> 
<div id="d3" class="hidden">description 3</div> 

<script> 

    $(".prodImg").click(function() { 

     if ($(this).hasClass("selected")) return; 

     $("#" + $(".selected").attr("desc")).addClass("hidden"); 
     $(".selected").removeClass("selected"); 

     $("#" + $(this).attr("desc")).removeClass("hidden"); 
     $(this).addClass("selected"); 

    }); 

</script> 

Cela devrait vous être assez proche. Vous devez définir la relation entre vos images et divs ... alors j'ai ajouté un attribut 'desc' aux images. La classe supplémentaire 'prodImg' sur les images vous permet de vous assurer que seules ces images sont câblées pour ce type de comportement d'échange et d'échange.

Answer 2

Le widget Acordian a des fonctionnalités similaires. Si vous placez les images dans les en-têtes, vous obtiendrez l'effet souhaité. Pour plus d'informations, consultez http://docs.jquery.com/UI/Accordion pour plus d'informations.

Answer 3

<script> 

    $(".prodImg").click(function() { 

     if ($(this).hasClass("selected")) return; 


     $('.prodImg').removeClass('selected'); 

     $(this).addClass('selected'); 

     var name = $(this).attr('desc'); 

     $('.'+name).removeClass(); 
     $('.'+name).addClass('');  

    }); 

</script> 

J'espère que cela peut vous aider!