根据特定图片更改img源

Question

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

所以我想通过获取图像源并检查它是否符合我要更改的图像的条件然后换入新的图标图像来更改页面上几个图标图像中的 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属性$('.image').attr('src', 'val');

或通过一个简单的循环

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

根据特定图片更改img源

Change the img source based on a specific image

html

javascript

tags

jquery

image