jQuery - изменение кнопки в списке нескольких форм

Question

Я работаю над приложением Spring-Boot и пытаюсь изменить изображение кнопки в зависимости от того, выбрал ли пользователь рецепт или нет.

В настоящее время html получает список рецептов, просматривает их и генерирует элемент формы и дочернюю кнопку для каждого рецепта, так что вы получите список форм. Все формы настроены на один и тот же класс, и я динамически изменяю идентификаторы кнопок.

index.html

<div class="grid-100 row addHover" th:each="recipe : ${recipes}">
    <a th:href="@{|/details/${recipe.id}|}">
      <div class="grid-70">
        <p>
        <form class="test" th:action="@{|/recipes/${recipe.id}/favorite|}" method="post" style="display:inline">
          <button  class="favorite-button-index" th:id="'favorite-button-index' + ${recipe.id}">
            <img th:src="${recipe.userFavorites.contains(#authentication.name)} ? @{/assets/images/favorited.svg} : @{/assets/images/favorite.svg}"
                                             style="height: 12px;">
          </button>
        </form>
        <span th:text="${recipe.name}"> </span>

        </p>
     </div>
     </a>

app.js

   $(".test").on("submit", function (e) {
        e.preventDefault();

        $.post(this.action, function (data) {
            console.log(data.favorited)
            var id;
            $('.favorite-button-index').each(function() {
                $(this).click(function(){
                    id = $(this).attr('id');
                    console.log(id)
                    // var imageUrl = (data.favorited) ? '/assets/images/favorited.svg' : '/assets/images/favorite.svg'
                    // $('#id>img').attr('src', imageUrl);
            })

            var imageUrl = (data.favorited) ? '/assets/images/favorited.svg' : '/assets/images/favorite.svg'
            $('#id>img').attr('src', imageUrl);
        });

    });
})

В app.js, когда отправляется отдельная форма, я пытаюсь получить идентификатор дочерней кнопки при ее нажатии, а затем использовать этот идентификатор, чтобы определить, какую кнопку в моем списке следует изменить

data.favorited выдает истину / ложь в зависимости от того, был ли рецепт избранным.

Я подтвердил, что переменная id захватывает правильный идентификатор кнопки, консолью регистрирует идентификатор при нажатии кнопки, но изображения для кнопки не обновляются.

Я довольно новичок в JS / jQuery, и любая помощь будет принята с благодарностью. Спасибо!

Answer 1

Скорее всего, вам нужно отделить переменную от строки:

 $('#' + id + '>img').attr('src', imageUrl);

Вы также можете сделать его чище, используя интерполяцию строк , например, так:

 $(`#${id}>img`).attr('src', imageUrl);