javascript - jQuery 图像转换器 : Alt tags

Question

Javascript 不是我的最强项，所以请耐心等待。

我在某人为我构建的网站上有一个图像更改器。它会根据单击的缩略图更改大图像 (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 -->

感谢任何帮助!

问候，

汤姆

Answer 1

使用 $(".large-image img").attr('alt','your-alt'); 正如您用于 src 的那样，那么您在代码中还有其他错误，在这里是固定代码:

$(".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