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标签

回答

相关问题