0

我有一个使用标签的单页网站 - 它以前有一个画廊。我现在添加 3 并尝试限制我编写的重复 jquery。当我专门有一个基于 IMG 的 id 的选择器时，它工作得很好，现在正试图通过 .img-main 选择器来引用它。我已经尝试过 prevAll() 和最接近的() ，但都没有为我工作。关于为什么我在这个方面如此失败的任何想法？

这是标记。

<div id="refinish-main"> <img src="images/refinish-0.jpg" class="img-main" alt="refinish-0" width="600" height="450"/> </div>
<ul id="refinish-thumbs" class="thumbs">
  <li><a href="images/refinish-3.jpg"><img src="images/refinish-3_tn.jpg" name="refinish-3" alt="3" width="85" height="60"/></a></li>
  <li><a href="images/refinish-2.jpg"><img src="images/refinish-2_tn.jpg" name="refinish-2" alt="2" width="85" height="60"/></a></li>
  <li><a href="images/refinish-1.jpg"><img src="images/refinish-1_tn.jpg" name="refinish-1" alt="1" width="85" height="60"/></a></li>
</ul>

这是jQuery：

//Swap Image on Click
$(".thumbs li a").click(function() {
        var mainImage = $(this).attr("href"); //Find Image Name
    $(".thumbs").closest("img.img-main").fadeOut("fast" , function(){
    $(this).attr('src', mainImage).one("load",function(){ 
            $(this).fadeIn("slow");
      });
    });
    return false;

提前感谢您的关注！

4

2 回答 2

1

向上遍历 DOM 时，最接近的不会遍历子元素。您可以使用

$(this).closest('ul').prev().find('.img-main')
于 2011-10-12T20:45:35.690 回答
0

我会使用委托而不是单击，因为 jQuery 必须将单击事件绑定到每次尝试

$(".thumbs").delegate('a','click',function() { 
  var mainImage = $(this).attr("href"); //Find Image Name 

    $(".thumbs")
        .prev()
        .fadeOut("fast" , function(){ 
            $(this)
                .attr('src', mainImage)
                .one("load",function(){  
                    $(this).fadeIn("slow"); 
              }); 
    }); 
    return false;        
});
于 2011-10-12T20:36:43.930 回答