réutiliser conteneur div pour charger des images

Question

Ce que je voudrais faire: utiliser un seul conteneur pour charger des images.

Tel qu'il est maintenant: J'ai onze (11) contenants en HTML, chacun avec sa propre div. chaque conteneur contient 4 images (2 images côte à haut et en bas côté) quand la liaison avec balise d'ancrage est cliqué div avec des images fades dans

accordéon jQquery est utilisé par exemple typique de navigation.

<li> 
    <a class="head" href="#">commercial/hospitality</a> 
    <ul> 
    <li><a href="#" projectName="project1" projectType="hospitality1" 
     image1="images/testImage1.jpg" 
     image2="images/testImage2.jpg" 
     image3="images/testImage3.jpg" 
     image4="images/testImage4.jpg">hospitality project number 1</a> 
    </li> 

    <li><a href="#" projectName="project2" projectType="hospitality2" 
     image1="images/testImage1.jpg" 
     image2="images/testImage2.jpg" 
     image3="images/testImage3.jpg" 
     image4="images/testImage4.jpg">hospitality project number 2</a> 
    </li> 

    <li><a href="#" projectName="project3" projectType="hospitality3" 
     image1="images/testImage1.jpg" 
     image2="images/testImage2.jpg" 
     image3="images/testImage3.jpg" 
     image4="images/testImage4.jpg">hospitality project number 3</a> 
    </li> 
    </ul> 
</li> 

typique <div> récipient utilisé pour l'insertion d'image actuellement il y a 11 d'entre eux:

<div id="hospitality1" class="current"> 
    <div id="image1"><img src="images/testImage.jpg"/></div> 
    <div id="image2"><img src="images/testImage.jpg"/></div> 
    <div id="image3"><img src="images/testImage.jpg"/></div> 
    <div id="image4"><img src="images/testImage.jpg"/></div> 
</div> 

Voici le code que je utilise à ce moment, il ne fonctionne pas, mais est-il une meilleure façon pour ce faire qui réutilisera seulement un seul conteneur div pour charger les images?

$(document).ready(function(){ 
    $('#navigation a').click(function (selected) {  

    var projectType = $(this).attr("projectType"); //projectType 
    var projectName = $(this).attr("projectName"); //projectName 

    var image1 = $(this).attr("image1"); //anchor tag for image number 1 
    var image2 = $(this).attr("image2"); //anchor tag for image number 2 
    var image3 = $(this).attr("image3"); //anchor tag for image number 3 
    var image4 = $(this).attr("image4"); //anchor tag for image number 4 

    console.log(projectType); //returns type of project 
    console.log(projectName); //returns name of project 
    console.log(image1);  //returns 1st image 
    console.log(image2);  //returns 2nd image 
    console.log(image3);  //returns 3rd image 
    console.log(image4);  //returns 4th image 

    $(function() {  
     $(".current").hide(); // hides previous selected image 
     $("#" + projectType).fadeIn("normal").addClass("current"); 

    });      
}); 

Comme vous pouvez, voir la marque devient assez grande.
Toute aide est appréciée.
ussteele

Answer 1

Vous pourriez faire quelque chose comme ceci avec jQuery:

$((function(){ 
    $('#navigation a').click(function (selected) {  
    $("#imgDiv").hide(); //Hide the div 

    $("#projectName").text($(this).attr("projectName")); //Set name 
    $("#projectType").text($(this).attr("projectType")); //Set type 
    for(var i = 1; i<=4;i++) { //Replace Images 
     $("#image" + i).attr("src", $(this).attr("image" + i); 
    } 

    $("#imgDiv").fadeIn("normal"); //Fade back in, only one - no need for current 
    });      
}); 

En utilisant ce code html pour votre seul div:

<div id="imgDiv"> 
    <div id="image1"><img src="images/testImage.jpg"/></div> 
    <div id="image2"><img src="images/testImage.jpg"/></div> 
    <div id="image3"><img src="images/testImage.jpg"/></div> 
    <div id="image4"><img src="images/testImage.jpg"/></div> 
    <span id="projectName"></span><span id="projectType"></span> 
</div> 

Si je mal compris, s'il vous plaît commentaires et correct, nous pouvons sans aucun doute faire ce travail avec un div :)