jQuery更改多个图像的源文件夹

Question

我试图让我的图像源属性在点击某个按钮时发生变化。截至目前，我得到了这个代码。

$('.palettemain #brown').click(function() { 
    var imageName = $('.panestop span > img').attr('alt'); 
    var imageFolder = 'images/sitebuilder/logo/brown/'; 
    $('.panestop span > img').each(function() { 
     $(this).attr('src', imageFolder + imageName); 
    }); 
}); 

正如你可以看到我已经宣布了图像的名字和图像文件夹的变量名。当我点击.palettemain #brown（按钮）时，它会加载图像，同时获取正确的文件夹名称和图像文件名称。这里的事情是，只有第一个实例的镜像文件名被提取。以下是点击发生之前的HTML代码。

<span> 
     <input type="radio" name="logo" checked="checked" /> 
     <img src="images/sitebuilder/logo/default/logo01.png" alt="logo01.png" /> 
    </span> 
    <span> 
     <input type="radio" name="logo" checked="checked" /> 
     <img src="images/sitebuilder/logo/default/logo02.png" alt="logo02.png" /> 
    </span> 
    <span> 
     <input type="radio" name="logo" checked="checked" /> 
     <img src="images/sitebuilder/logo/default/logo03.png" alt="logo03.png" /> 
    </span> 

下面是输出点击时：

<span> 
     <input type="radio" checked="checked" name="logo"> 
     <img alt="logo01.png" src="images/sitebuilder/logo/brown/logo01.png"> 
    </span> 
    <span> 
     <input type="radio" checked="checked" name="logo"> 
     <img alt="logo02.png" src="images/sitebuilder/logo/brown/logo01.png"> 
    </span> 
    <span> 
     <input type="radio" checked="checked" name="logo"> 
     <img alt="logo03.png" src="images/sitebuilder/logo/brown/logo01.png"> 
    </span> 

的输出，你可以看到，被复制的第一个图像alt属性。如何获取图像的每个实例的alt属性？

Answer 1

您只能从alt属性读取一次图像名称。尝试：

$('.palettemain #brown').click(function() { 
    var imageFolder = 'images/sitebuilder/logo/brown/'; 
    $('.panestop span > img').each(function() { 
     imageName = $(this).attr('alt'); 
     $(this).attr('src', imageFolder + imageName); 
    }); 
});