最接近的& prevAll 不适用于我，尝试在单击锚点时设置特定类图像的 src

Question

我有一个使用选项卡的单页网站 - 它以前有一个画廊。我现在添加 3 并尝试限制我编写的重复 jquery。当我专门有一个基于 IMG id 的选择器（现在正尝试通过 .img-main 选择器引用）时，它工作得很好。我已经尝试过 prevAll() 和; closest() 两者都不适合我。关于为什么我在这方面如此失败有什么想法吗？

这是标记。

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

提前感谢您的浏览！

Answer 1

向上遍历 DOM 时，closest 不会遍历子元素。您可以使用

$(this).closest('ul').prev().find('.img-main')

Answer 2

我会使用委托而不是单击，因为 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;        
});