JQuery - итерация по нескольким элементам и замена src и href

Question

Я делаю сайт галереи изображений, который хранит тысячи изображений.Чтобы не отставать от клиента, я хочу добавить разбиение на страницы, чтобы получать только количество изображений X за один раз, когда пользователь нажимает кнопку «следующий / предыдущий» для просмотра изображений.

Запрос AJAX, содержащий номер страницы,отправляется на сервер при нажатии кнопки, и сервер возвращает новые имена файлов изображений с разбивкой по страницам в data.images

. Моя цель - циклически проходить через каждый атрибут src и href изображения в HTML и заменять значения напуть к файлу нового изображения, поэтому новые изображения отображаются на веб-странице.

HTML:

<main class="row">
    {% for image in data["images"] %}
        <div class="image">
            <a href="static/images/{{ image.filename }}"  target="_blank">
                <img alt="image" src="static/images/{{ image.filename }}">
            </a>
        </div>
    {% endfor %}
</main>

JQuery:

$('button').click(function() {

    $.ajax({
        url: "/get_images",
        type: "GET",
        data: { 
            page: 2,
        },
        success: function(data) {
            // the backend successfully returns the new image filenames in data.images
            console.log(data.images);

            // not exactly sure what to add here
            // to iterate through all of the elements and replace each href and src with the new image filename
        },
    });
});

Answer 1

Попробуй вот так.присвойте тэгам некоторые атрибуты dynmamic.Выполните цикл for внутри функции успеха ajax с помощью динамического атрибута id src и href для идентификатора атрибута.

$('button').click(function() {

    $.ajax({
        url: "/get_images",
        type: "GET",
        data: { 
            page: 2,
        },
        success: function(data) {
          for (i = 0; i < data.images.length; i++) {
            var id = "static/images/"+data.images[i];
            $("[imageid='image"+i+"']").attr('src', id);
            $("[hrefid='image"+i+"']").attr('href', id); 
          }
        },
    });
});

<main class="row">
    {% var i=0; %}
    {% for image in data["images"] %}
        <div class="image">
            <a href="static/images/{{ image.filename }}"  target="_blank" hrefid="image"+i>
                <img alt="image" src="static/images/{{ image.filename }}" imageid="image"+i>
            </a>
        </div>
     {% i++   %}
    {% endfor %}
</main>