'替换'改变整个src，而不仅仅是结尾.为什么?

'Replace' changes entire src and not just the ending.. why?

本文关键字：不仅仅是 结尾 为什么 替换 改变 src      更新时间：2023-09-26

情况：我有十个灰色的div（每个都有一个图像和文本）作为按钮。我希望按钮在激活时具有较暗的文本和较暗的图像。当单击活动按钮时，我希望它停用。我还希望它在另一个按钮激活时停用。

问题：当我替换图像源上的结尾时，它会将图像上的完整源更改为与活动源相同。。。其将所有其他图像改变为相同的图标。

jsfiddle：http://jsfiddle.net/messedUP90/gtf1dk0m/

警告：jsfiddle显示了我遇到的问题，所有其他图像都变为相同，但由于某些原因，活动图像不会改变颜色。它在Dreamweaver中运行良好，所以我不太担心。

$(document).ready(function(){
    var x = 300;
    $("[id^=pport]").click(function () {
        var src = $('.butt', this).attr('src');
        if($(this).hasClass('highlight')){
            $(this).removeClass('highlight');
            $('.butt', this).attr('src', src.replace(/_dark('.[^.]+)?$/, '_light$1'));
        }
        else{
            $('.butt').removeClass('highlight');
            $('.butt').attr('src', src.replace(/_dark('.[^.]+)?$/, '_light$1'));
            $('.talk').fadeOut(x);
            $(this).addClass('highlight');
            $('.butt', this).attr('src', src.replace(/_light('.[^.]+)?$/, '_dark$1'));
        }
    });
});

问题正如您所描述的那样-您将每个图标的src更改为您单击的图标的src，只是将light与dark交换。

I.E.你很早就设置了var src = $('.butt', this).attr('src');

在任何情况下，您都不会将变量src重新设置为任何其他值。

然后你$('.butt').attr('src', src.replace(/_dark('.[^.]+)?$/, '_light$1'));

这将使用butt类的所有元素的src属性设置为所单击图标的浅色版本。

这就是你的问题所在。。。

您不需要简单地尝试一次性更改图像，而是需要循环查看完整的图像集：

$('.butt').each( function( index ) {
    if ( $(this).attr('src') ) {
        $(this).attr('src', $(this).attr('src').replace(/_dark('.[^.]+)?$/, '_light$1'));
    } 
});

Fiddle（工作，但有与您相同的光/暗限制）在这里：http://jsfiddle.net/gtf1dk0m/1/

$('.butt').removeClass('highlight');

从具有CCD_ 11类的每个元素中移除CCD_。属性替换也是如此。您需要使用$(this)。

相关文章：