Как я могу поменять один термин в img src на всех изображениях DOM, используя javascript / JQuery?

0

Мне нужно поменять все img src/products/210x110/foo-bar-foo-front.jpg на /products/210x110/bar-foo-bar-angle.jpg и применить его к каждому изображению в dom.

Мой текущий код работает, но применяет url src от первого изображения в dom до всех атрибутов img src:

мне нужно просто заменить одно слово...

//toggle image angles
var img = $("div.product-image a img");
$('div#image-angle-switch').toggle(function() {
    $(this).html('<span></span> Angle view ')
    switch_to_low_fi();
}, function() {
    $(this).html('<span></span> Front view')
    img.attr("src", img.attr("src").replace("front", "angle"));
});
$('div#image-angle-switch').click(function() {
    img.attr("src", img.attr("src").replace("toggle"));
});

Могу ли я создать массив каждого img src, поменять одно слово и повторно применить к каждому img?

var tn_array = $("div.product-image a img").map(function() {

    return $(this).attr("src");
});

for (var i=0; i<tn_array.length; i++) {
    console.log(tn_array[i]);
}

Получил мой массив, но как мне его применить? Любая помощь очень ценится.

  • 0
    Зачем наносить на карту это? Просто поменяйте его, как щелчок.
  • 0
    так нет необходимости в массиве? он заменяет все изображения первым img src, а не просто заменяет 1 слово.
Показать ещё 6 комментариев
Теги:

1 ответ

2
Лучший ответ

Переверните каждое изображение и измените его.

$('#image-angle-switch').data("view", "front").click(function () {
    var $this = $(this);
    if ($this.data("view") == "front") {
        $this.html('<span></span> Angle view ').data("view","angle");

        // this does the looping
        $("div.product-image a img").attr("src",function (i, src) {
            return src.replace("front", "angle");
        });
    } else {
        $this.html('<span></span> Front view ').data("view", "front");

        // this does the looping
        $("div.product-image a img").attr("src", function (i, src) {
            return src.replace("angle", "front");
        });
    }
});

Также был заменен старый метод изношенных меток. Можно сделать сушилку, хотя

Поделиться
  • 0
    Просто для любопытства позвольте мне спросить вас, почему вы использовали var $this = $(this); ? Я имею в виду, хорошо, чтобы использовать переменную для хранения $(this) но немного приподнимается, чтобы хранить ее с почти тем же именем. Помимо типографии, что-нибудь связано с исполнением?
  • 1
    В этом случае это очень крошечная оптимизация, но цель состоит в том, чтобы не создавать новый объект jquery несколько раз, когда вам это не нужно. Просто одна из моих привычек кодирования, но это неплохая привычка
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню