jQuery Image Changer：Alt標籤

Javascript並不是我最強的西裝，所以請耐心等待。jQuery Image Changer：Alt標籤

我在某個網站上有一個圖像轉換器，有人爲我創建。它根據點擊哪個縮略圖來改變大圖像（http://mitre.mitrebluelight.co.uk/shop/buy/footwear/cold-wet-weather）。

我有ALT標籤顯示大圖像和縮略圖，但我試圖讓腳本不僅改變大圖像SRC，而且ALT標籤。

這裏的腳本：

$(".small-images li a").click(function(){ 
    var $target = $(this).attr('href'); 

    $(".large-image img").fadeOut('fast',function(){ 
     $(".large-image img").attr('src',$target) 
    $(".large-image img").fadeIn('fast'); 
})

而這裏的HTML（請注意，如果某些標籤看起來不尋常的，那是因爲我使用ExpressionEngine等一個CMS）：

    <div class="large-image">{exp:imgsizer:size image="/assets/media/{image_large}" width="389" height="250" alt="{image_large_title}"}</div><!-- End of div: large-image --> 
       <div style="display:none;"> 
        {images} 
         {exp:imgsizer:size image="/assets/media/{filenm}" width="389" height="250" alt="{image_title}"} 
        {/images} 
       </div> 
       <div class="small-images"> 
        <h5>More images:</h5> 
        <ul> 
         {images} 
          <li><a href="{exp:imgsizer:size image="/assets/media/{filenm}" width="389" height="250" justurl="yes"}" {image_switch="|||class='last'"}>{exp:imgsizer:size image="/assets/media/{filenm}" width="89" height="89" alt="{image_title}"}</a></li> 
         {/images} 
        </ul> 
       </div><!-- End of div: small-images -->

任何幫助不勝感激！

問候，

湯姆

來源

2011-09-03 Tom Perkins

你想改變一個image標籤的alt屬性？添加以下代碼：

$(".large-image img").attr('alt', 'new alt text');

產品總數則可能是：

$(".small-images li a").click(function(){ 
    var $target = $(this).attr('href'); 
    var $alt = $(this).find('img').attr('alt'); // get alt attribute of next image 

    $(".large-image img").fadeOut('fast',function(){ 
     $(".large-image img").attr('src',$target); 
     $(".large-image img").attr('alt',$alt); // set alt attribute 
     $(".large-image img").fadeIn('fast'); 
    });

來源

2011-09-03 09:44:22 scessor

嗨scessor更新版本以下的建議，感謝您的輸入。可悲的是，它仍然無法正常工作。如果你看看我已經使用你的腳本更新過的例子（http://mitre.mitrebluelight.co.uk/shop/buy/footwear/cold-wet-weather），它就會得到第一個大文本的替代文本圖像，併爲正確的小圖像的其餘部分，但仍然不會更改大圖像替代文字。任何其他想法？ –

不客氣。 – scessor

我已更新我的代碼。 – scessor

你想使用的圖像的alt屬性的鏈接裏面？試試這個：

$(".small-images li a").click(function(){ 
    var $target = $(this).attr('href'); 
    var alt = $(this).find("img").attr('alt'); 

    $(".large-image img").fadeOut('fast',function(){ 
     $(".large-image img").attr('src',$target).attr('alt',alt); 
    $(".large-image img").fadeIn('fast'); 
})

來源

2011-09-03 09:48:18

使用，你用於SRC $(".large-image img").attr('alt','your-alt');，那麼你必須在代碼中其他錯誤，這裏是固定碼：

$(".small-images li a").click(function(e){ 
    e.preventDefault(); // to prevent default action 

    var $target = $(this).attr('href'); 

    $(".large-image img").fadeOut('fast',function(){ 
     $(".large-image img").attr('src',$target); 
     $(".large-image img").attr('alt','your-alt'); 
     $(".large-image img").fadeIn('fast'); 
    }); 
});

確保使用它時，DOM已準備就緒或使用document.ready

來源

2011-09-03 09:50:28 Usman

-1

您已經在使用錨點的href屬性來設置圖片src，因此您可以使用$('img', this)來查找已點擊圖片的alt並執行相同操作。

$(".small-images li a").click(function(){ 
    var target = $(this).attr('href'); 
    var alt = $('img', this).attr('alt') ; 
    $(".large-image img").fadeOut('fast',function(){ 
     $(this).attr('alt',alt) ; 
     $(this).attr('src',target); 
     $(this).fadeIn('fast'); 
    }) ; 
}) ;

雖然你可以。你不需要在javascript中使用$作爲變量，只需var target就足夠了。

編輯 - 從@烏斯曼的回答

(function($) { 
    $(document).ready(function() { 
     $(".small-images li a").click(function(){ 
      e.preventDefault() ; 
      var target = $(this).attr('href'); 
      var alt = $('img', this).attr('alt') ; 
      $(".large-image img").fadeOut('fast',function(){ 
       $(this).attr('alt',alt) ; 
       $(this).attr('src',target); 
       $(this).fadeIn('fast'); 
      }) ; 
     }) ; 
    }) ; 
})(jQuery);

來源

2011-09-03 09:51:51 Gus

好奇爲什麼-1？ – Gus

jQuery Image Changer：Alt標籤

回答

相關問題