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);
    });
});