根据特定图像更改img源

Question

我有一个页面有几个需要更改的图标图像。我无法通过 ID 获取图像，因为它们是由服务器生成的，因此总是会更改，但我可以通过类名获取它们。

所以我想更改页面上几个图标图像中的 4 个，方法是获取图像源并检查它是否符合我要更改的图像的标准，然后换入新的图标图像。

我在 javascript 和 JQuery 中有一些笨拙的版本，但我真的在寻找一个功能强大且简单的精巧版本。

我确实发现这对于需要在多个位置更改的 4 个单独的图像效果很好：

 function changeArrow() {
            $('img[src="chevron-orange-round-down.jpg"]').attr('src', 'chevron-blue-round-down.jpg')
            $('img[src="chevron-orange-round-up.jpg"]').attr('src', 'chevron-blue-round-up.jpg') 
            $('img[src="chevron-orange-round-left.jpg"]').attr('src', 'chevron-blue-round-left.jpg') 
            $('img[src="chevron-orange-round-right.jpg"]').attr('src', 'chevron-blue-round-right.jpg') 
        }

我预计我需要一个如下所示的循环，例如 .each ，但这改变了所有符合条件的图像实例。

Answer 1

你可以设置src attr $('.image').attr('src', 'val');

或者通过一个简单的循环

$('.image').each(function(i, obj) {
    if($(this).attr('src')=='some criteria')
    {
    $(this).attr('src', 'val');
    }
});