重用div容器來加載圖片

Question

我想要做的事： 使用單個容器加載圖片。

因爲它是現在： 我有11（11）容器在HTML標記每個都有自己的股利。 每個容器容納4幅圖像（2圖像並排頂部和底部） 當在錨標籤鏈接被點擊的div與圖像變淡在

jQquery手風琴用於導航典型的例子是：

<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> 

用於圖像插入

典型<div>容器目前有他們的11：

<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> 

這裏是我利用此時的代碼，它的工作，但有沒有更好的辦法 要做到這一點，只會重新使用一個單獨的div容器加載圖像？

$(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"); 

    });      
}); 

正如你可以看到，標記變得相當大。
任何幫助表示讚賞。
ussteele

Answer 1

你可以做這樣的事情用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 
    });      
}); 

使用這個網站爲您的單格：

<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> 

如果我誤會了，請評論和正確的，我們絕對可以使這個工作與一個區:)