0

タブを利用する単一ページのサイトを持っています - 以前は 1 つのギャラリーがありました。私は今、3を追加し、私が書いた重複したjqueryを制限しようとしています. .img-main セレクターを介して参照しようとしている IMG の ID に基づいたセレクターを具体的に持っていたときに、うまくいきました。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;

ご覧いただきありがとうございます。

4

2 に答える 2

1

DOMをトラバースする場合、closestは子要素をトラバースしません。使用できます

$(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 に答える