Question

在我的项目中，我可以通过单击颜色按钮来更改整个布局的颜色方案。有三种颜色。我只有一个问题 - 图标问题。默认情况下它们是红色的，通过单击指定的按钮，它们应该转换按钮的确切颜色。当然，我可以完成所有工作，根据事件手动将每个图标更改为每种颜色。但这是一个代码的地狱，绝对没有功能。我知道它应该如何运作。每种颜色我有三个文件夹。在每个文件夹中都有同名的彩色图标。因此，通过单击颜色按钮，我只需要更改“src”中的文件夹名称。以下是我的一些代码：

<div id="color-selector-box">
        <div id="red" class="color-button" color-name="#d94d4b" src="img-v4/dl-button-red.png"></div>
        <div id="green" class="color-button" color-name="#86aa66" src="img-v4/dl-button-green.png"></div>
        <div id="blue" class="color-button" color-name="#4ab1d0" src="img-v4/dl-button-blue.png"></div>
    </div>

$('.bg-color-button').click(function(){
    pickedBackground = $(this).attr('color-background');
    var mildBackground = $(this).attr('mild-color');
    var bgType = $(this).attr('bg');

    $('.termine-box').attr('style', 'background:' + pickedBackground+ '!important');
    $('#mobile-navigation-bar').css('background', pickedBackground);
    $('.strong').css('background', pickedBackground);
    $('.mild').css('background', mildBackground);
    if(bgType == 'light') {
        $('.strong, .mild, .impressum a, #mobile-navigation-bar a, #navigation-bar a, .menu-bar, .termine-inside h1, .date-area').css('color', '#1b1b1b');
    } else {
        $('.strong, .mild, .impressum a, #mobile-navigation-bar a, #navigation-bar a, .menu-bar, .termine-inside h1, .date-area').css('color', '#ffffff');
    }
});

Answer 1

希望你看起来像这样。你可以用你的新路径替换newsrc。

$('.color-button').click(function(){
  $(this).attr('src','newsrc')
})

Answer 2

所以我找到了我想要的解决方案。以下是我正在寻找寻找相同解决方案的人的代码。

$('.tab-img img').each(function(){
            var $this = $(this)
            $this.attr('src',$this.attr('src').replace('dark-grey-icons','grey-icons'));
        })

用jquery改变彩色的图标

2 个答案: