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

Answer 2

您想要更改alt代码的image属性吗？添加以下代码：

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

Answer 3

是否要使用链接中图像的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');   
})

Answer 4

您已经使用锚点的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即可。

编辑 - 根据@ Usman的回答提供的更新版本

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

jQuery Image Changer：Alt标签

4 个答案: