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