单击按钮时替换图像 src 属性中的文件夹名称答案

【问题标题】：Replace folder name in image src attribute on clicking a button单击按钮时替换图像 src 属性中的文件夹名称
【发布时间】：2018-12-03 09:34:26
【问题描述】：

单击按钮/触发器时，我需要将特定类“.imageShift”的所有实例的文件夹路径名称从 img/image.jpg 更改为 imgdark/image.jpg。在图像 src 中插入的图像名称在所有出现时都应该保持不变。只是“img”文件夹路径必须替换为“imgdark”。我尝试了下面给出的代码。

$('.themeColor').click(function () {
    var getId = $(this).attr('id');
    var imagePath = $('.imagePath');
    if (getId === 'darkTheme') {

        imagePath.attr('src', function (index, attr) {
            return attr.replace('img', 'imgdark');
        });
    } else if (getId === 'lightTheme') {
        imagePath.attr('src', function (index, attr) {
            return attr.replace('imgdark', 'img');
        });
    }
});

上述代码运行良好，但每次单击时都会出现控制台错误，如下所示。我需要摆脱那个控制台错误，并像现在一样完成这项工作。如果有人已经这样做了，请提供帮助。

Uncaught TypeError: Cannot read property 'replace' of undefined
at HTMLLIElement.<anonymous> (homepage.js:1619)
at z (jquery-3.3.1.min.js:2)
at w.fn.init.attr (jquery-3.3.1.min.js:2)
at HTMLSpanElement.<anonymous> (homepage.js:1617)
at HTMLSpanElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLSpanElement.y.handle (jquery-3.3.1.min.js:2)

【问题讨论】：

您是否有一个可以在控制台中重现错误的工作 jsFiddle 示例？
if (getId === 'darkTheme') 是否有多个实例具有相同的 id（darkTheme 或 lightTheme）？
在尝试替换之前检查attr 是否存在。似乎存在属性或 imagePath 类不存在的情况，因此您不能对其应用替换。我无法真正为您提供解决方案，因为我看不到整个画面，但请尝试使用调试器并逐步执行您的函数，看看为什么会出现属性不存在的情况。
您必须检查具有值@Constantin Chirila 的 imagePath 是否注意到此问题。您需要检查 imagePath 是否有值，否则您不允许替换值
你有一个错误。当您将imgdark 更改为img 时，它实际上更改为imgdarkdark。因为 replase 更改的不是整个字符串，而是其中的一部分 imgdarkdark。您需要在替换中使用正则表达式

标签： javascript jquery html css

【解决方案1】：

使用这个：

$('.themeColor').click(function () {
var getId = $(this).attr('id');
var imagePath = $('.imagePath');
if (getId === 'darkTheme') {

    imagePath.attr('src', 'imgdark/image.jpg');
} else if (getId === 'lightTheme') {
    imagePath.attr('src', 'img/image.jpg');
}

});

【讨论】：

感谢您的回复。实际上，我在多个图像中有多个 .imagePath 类的实例。因此，此代码应适用于具有类 .imagePath 的许多图像，而不仅适用于单个图像 image.jpg。此代码仅适用于 image.jpg。我实际上需要将所有具有类 .imagePath 的图像中的 img/ 单独更改为 imgdark/。
如果图像名称发生变化怎么办？还是有多个实例？
好的！测试这个解决方案： $('.themeColor').click(function () { var getId = $(this).attr('id'); var imagePath = $('.imagePath'); if (getId === 'darkTheme') { imagePath.attr('src', function (index, attr) { if attr {return attr.replace('img/', 'imgdark/');} }); } else if (getId == = 'lightTheme') { imagePath.attr('src', function (index, attr) { if attr { return attr.replace('imgdark/', 'img/');} }); } });跨度>
@mdev 非常感谢。这行得通。我什至不是中间人，但我仍然无法弄清楚它是如何工作的。但感谢您的帮助。它与函数中包含的 if 块一起使用。控制台错误消失了。再次感谢

【解决方案2】：

你可以这样做：

$('.themeColor').click(function () {
  $('.themeColor').removeClass('themeActive');
     var getId = $(this).attr('id');
     var imagePath = $('.imagePath');
     if (getId === 'darkTheme') {
      imagePath.attr('src', imagePath.attr('src').replace('img/', 'imgdark/'));
     } else if (getId === 'lightTheme') {
       imagePath.attr('src', imagePath.attr('src').replace('imgdark/', 'img/'));
     }

    $('.imagePath').each(function(index, val) {
     console.log('You changed the image('+(index+1)+') path to:'+$(this).attr('src'))
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="themeColor" id="darkTheme">Dark</button>
<button class="themeColor" id="lightTheme">Light</button>


<img class="imagePath" src="imgdark/sampleimg.jpg" alt="">
<img class="imagePath" src="imgdark/sampleimg.jpg" alt="">

【讨论】：

这个可行，但它会替换 .imagePath 类的所有实例中第一个出现的图像。所以所有的图像标签都有相同的图像。这就是为什么在那里包含一个函数的原因

【解决方案3】：

使用这个：

    $('.themeColor').click(function () {
    var getId = $(this).attr('id');
    var imagePath = $('.imagePath');
    if (getId === 'darkTheme') {

        imagePath.attr('src', function (index, attr) {
            if attr {
              return attr.replace('img/', 'imgdark/');
           }
        });
    } else if (getId === 'lightTheme') {
        imagePath.attr('src', function (index, attr) {
            if attr {
                 return attr.replace('imgdark/', 'img/');
}
        });
    }
});

【讨论】：

@mdev 非常感谢。这行得通。我什至不是中间人，但我仍然无法弄清楚它是如何工作的。但感谢您的帮助。它与函数中包含的 if 块一起使用。控制台错误消失了。再次感谢