0

我想做的：使用单个容器来加载图像。

就像现在一样：我在 HTML 标记中有十一 (11) 个容器，每个容器都有自己的 div。当单击锚标记中的链接时，每个容器包含 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");

    });                     
});

如您所见，看到标记变得非常大。
任何帮助表示赞赏。
美国钢铁

4

1 回答 1

0

你可以用 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
  });                     
});

将此 html 用于您的单个 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>

如果我误解了，请评论和纠正，我们绝对可以用一个 div 完成这项工作:)

于 2010-03-25T18:51:35.757 回答