图像以某种方式加载两次

Question

似乎我一直在绊倒奇怪的问题。我正在研究一种非常简单的灯箱，但现在图像加载了两次。我不知道是不是因为它是中心图像，或者因为它被拉伸（而其余部分没有被拉伸）但它不能正常工作。

我有这个HTML

<ul>
 <li><a href="largeImage1.jpg" class="box"><img src="smallImage1.jpg" id="image1"></a></li>
 <li><a href="largeImage2.jpg" class="box"><img src="smallImage2.jpg" id="image1"></a></li>
 <li><a href="largeImage3.jpg" class="box"><img src="smallImage3.jpg" id="image1"></a></li>
</ul>

图像1和3的尺寸为800×553，而图像2的尺寸为400×600

我运行此代码

$("a").click(function(event){
 $("#shadow").add($("#shadowContent"),$("#closeBox"),$("#imageSelectPrevious"),$("#imageSelectNext"),$("#content")).remove();

 [..]

 var parentEl = $(this).closest("ul");
 var currPosition = $(this).parent().prevAll().length + 1;
 var totalItems = $("#"+$(parentEl).attr("id")+" li").length;
 var newImage = new Image();

 $(newImage).load(function(){
  newWidth = this.width, newHeight = this.height+35;

  [.. Load transparent background other necessary html elements ..]

  if(currPosition == totalItems){
   var prevImageParentList = currPosition - 1;
   var prevImage = $("#"+$(parentEl).attr("id")+" li:nth-child("+prevImageParentList+") a").attr("href");
   $("#content").css({width:newWidth+'px',height:newHeight+'px',margin:'0'}).html("<div id='imageSelectPrevious'><a href='#' class='imageNavLink' title='"+prevImage+"'>Previous</a></div><img src='"+image+"' style='margin:0'></div>");
   $("#imageSelectPrevious").add($(".imageNavLink")).css({height:this.height+'px'}); 

  }else if(currPosition == 1){
   var nextImageParentList = currPosition + 1;
   var nextImage = $("#"+$(parentEl).attr("id")+" li:nth-child("+nextImageParentList+") a").attr("href");
   $("#content").css({width:newWidth+'px',height:newHeight+'px',margin:'0'}).html("<div id='imageSelectNext'><a href='#' class='imageNavLink' title='"+nextImage+"'>Next</a></div><img src='"+image+"' style='margin:0'></div>");
   $("#imageSelectNext").add($(".imageNavLink")).css({height:this.height+'px'}); 

  }else{
   var prevImageParentList = currPosition - 1;
   var nextImageParentList = currPosition + 1;
   var prevImage = $("#"+$(parentEl).attr("id")+" li:nth-child("+prevImageParentList+") a").attr("href");
   var nextImage = $("#"+$(parentEl).attr("id")+" li:nth-child("+nextImageParentList+") a").attr("href");
   $("#content").css({width:newWidth+'px',height:newHeight+'px',margin:'0'}).html("<div id='imageSelectPrevious'><a href='#' class='imageNavLink' title='"+prevImage+"'>Previous</a></div><div id='imageSelectNext'><a href='#' class='imageNavLink' title='"+nextImage+"'>Next</a></div><img src='"+image+"' style='margin:0'></div><img src='"+image+"' style='margin:0'></div>");
   $("#imageSelectPrevious").add($("#imageSelectNext"),$(".imageNavLink")).css({height:this.height+'px',background:'red'}); 
  }

  $(".imageNavLink").click(function(event){
   event.preventDefault();
   alert(this.title);
  });
 });
});

第一张和最后一张图片工作正常。如果我点击链接它会提醒相应的图片网址，但是当我点击链接时，中间的网站没有做任何事情，不知怎的，它会加载2张图片（看到截图（红色条只是为了检查链接是否真的存在） ）

有人能看到这里出了什么问题吗？

Answer 1

只是我还是这行中有两个图像标签？

   $("#content").css({width:newWidth+'px',height:newHeight+'px',margin:'0'})
       .html("<div id='imageSelectPrevious'><a href='#' class='imageNavLink' title='"+prevImage+"'>Previous</a></div><div id='imageSelectNext'><a href='#' class='imageNavLink' title='"+nextImage+"'>Next</a></div><img src='"+image+"' style='margin:0'></div><img src='"+image+"' style='margin:0'></div>");

Answer 2

嗯......我明白了。

如果我在最后一张图片下方添加$(".imageNavLink").css({height:this.height+'px'});，则可以使用。对我来说仍然很奇怪为什么这只是最后一张图片所必需的......