close & prev Все не работает для меня, пытаясь установить src изображения определенного класса по щелчку якоря

Question

У меня есть одностраничный сайт, который использует вкладки - раньше у него была одна галерея.Я сейчас добавляю 3 и пытаюсь ограничить дубликат jquery, который я пишу.Это работало нормально, когда у меня был специальный селектор, основанный на идентификаторе IMG, на который сейчас пытаются ссылаться через селектор .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 ближайший не пересекает дочерние элементы. Вы можете использовать

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