Question

我有10个按钮，每个按钮都有不同的图像和文字。我有每个按钮单击开/关，如果单击另一个按钮我想要关闭活动按钮。我正在与后者挣扎。

var x = 300;

//port1
    $('#port1').click(
    function(){
        var src = $('.image', this).attr('src');
        //var srcs = $(this).attr('src');
        if($(this).hasClass("highlight")) {  
            $('.butt').removeClass('highlight');
            $('.image', this).attr('src', src.replace(/_dark(\.[^.]+)?$/, '_light$1'));
            $('.p1').fadeOut(x);
        }
        else{
            $('.butt').removeClass('highlight');
        //  $('.butt').attr('src').replace('_dark.png', '_light.png');
            $('.butt img').each(function() {
                var src2 = $('.image').attr('src').replace(/_dark(\.[^.]+)?$/, '_light$1');
                $('.image').attr('src', src2);
            });
            $('.talk').fadeOut(x);
            $(this).addClass('highlight');
            $('.image', this).attr('src', src.replace(/_light(\.[^.]+)?$/, '_dark$1'));
            $('.p0').fadeOut(x);
            $('.p1').fadeIn(x);
     }  
});

我遇到的问题是，当我点击按钮时，它会将所有其他按钮上的src更改为与此按钮完全相同，而不仅仅是将其他来源的结尾更改为＆＃39; _dark＆＃39 ;.我想加上这个＆＃39;每个＆＃39;功能会有所帮助，但事实并非如此。

编辑：我不熟悉编码，但我尝试了一个jsfiddle：http://jsfiddle.net/messedUP90/yxjoxe41/ 出现的随机计算机是我想要的效果和我写的代码之前，我记得每个图标都会有所不同。看看标题为＆＃34; un＆＃34;的第一个按钮。我正在谈论的错误发生在哪里。

Answer 1

这个函数中有一些奇怪的代码和命名约定......例如var src = $('.image', this).attr('src'); ...这里提出的问题很多原因不明，没有jsfiddle它很难想象你是什么表示或查看您正在使用的HTML元素...

所以我会尝试基于纯粹的描述而不是你的代码来回答。

如果要删除某个类的所有实例（例如活动类），您只需执行each函数，但是稍后关于它的更改所有其他图像源的注释将在此行中{{1} }。您已经有效地定位了$('.image').attr('src', src2);类下的所有图像，这些图像似乎都是您的所有图像。也许您想要的实际上是遍历所有元素并删除活动状态，例如......

.butt

然后，您现在可以自由选择单击按钮并将其活动状态添加到...

$(".butt img").each(function() {
    //Remove Active Classes
    if($(this).hasClass("activeImage")) {
        $(this).removeClass("activeImage");
    }
});

然后在你的CSS中你可以确保你有一个像

这样的规则

$(".buttons").each(function() {
    $(this).click(function() {
        //Old Code
        $(".butt img").each(function() {
            //Remove Active Classes
            if($(this).hasClass("activeImage")) {
                $(this).removeClass("activeImage");
            }
        });
        //New Code
        $(this).addClass("activeImage");
    });
});

Answer 2

http://jsfiddle.net/gtf1dk0m/1/

您需要重新设置变量src。

此代码执行此操作：

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

忽略了jsfiddle中图像不会改变颜色的事实。它适用于Dreamweaver。：）

替换多个img src上的结尾

2 个答案: