1

Я начинаю с создания тестового списка со ссылками на изображение. Затем я передаю его в модель под именем _links

@GetMapping("/{id}")
public String showItem(@PathVariable int id, Model model)
{
    List<String> imageLinks = new ArrayList<>();
    imageLinks.add("/resources/static/images/products/1/product_test_image.jpg");
    imageLinks.add("/resources/static/images/products/1/product_test_image2.jpg");
    imageLinks.add("/resources/static/images/products/1/product_test_image3.jpg");
        
    model.addAttribute("_links", imageLinks);
    return "item/item";
}

Затем в определенном месте html-кода рисую количество кнопок, равное количеству картинок в списке _links. Я могу передать номер цикла в метод imgSrc. Но я не могу передать саму строку ссылки. Когда я пытаюсь отправить его, страница перестает нормально отображаться. Поэтому эта строка закомментирована.

    <div th:each="link, iStat : ${_links}">
        <span id="current_img" th:text="${link}"></span>
        <input type="image" th:src="${link}" alt="miniature" th:onclick="'imgSrc(\'' + ${iStat.index} + '\');'" style="width: 80px; height: 80px; margin: 3px">
   <!-- <input type="image" th:src="${link}" alt="miniature" th:onclick="'imgSrc(\'' + ${link} + '\');'" style="width: 80px; height: 80px; margin: 3px"> -->
    </div>

И, наконец, метод, который я вызываю. Последняя строка закомментирована, но она показывает, чего я хочу достичь. А именно, нажав на картинку в списке, я хочу изменить большую картинку на новую, выбранную в цикле.

<script language="JavaScript">

            var selectedImage = document.getElementById("current_img");

            var mainImage = document.getElementById("main_product_image");
            var debug = document.getElementById("debug");
            var debug2 = document.getElementById("debug2");
            
            function imgSrc(link)
            {
                mainImage.src = selectedImage.innerHTML;
                debug.innerHTML = selectedImage.innerHTML;
                debug2.innerHTML = link;
            //  mainImage.src = link;
            }

</script>

Любопытно, что ссылка нормально передается в файл th:text.

<span id="current_img" th:text="${link}"></span>

Фиксированное количество кнопок отрисовывать не вариант потому что количество фотографий для каждого предмета может отличатся. Заранее спасибо всем, кто ответит.

2 ответа 2

0

Я бы предложил вам все упростить и не вызывать JavaScript код через Thymeleaf обработчик. В странице оставте следующий HTML:

<div th:each="link, iStat : ${_links}">
    <span id="current_img" th:text="${link}"></span>
    <input type="image" th:src="${link}" alt="miniature" onclick="changeImage();" style="width: 80px; height: 80px; margin: 3px">
</div>

А функция будет читать атрибут элемента по которому кликнули:

<script language="JavaScript">
   var mainImage = document.getElementById("main_product_image");

   function changeImage(e) {
       mainImage.src = e.target.getAttribute("src");
   }
</script>
0

@Slava Ivanov

Код который вы дали не работал в том виде что он есть. Однако немного его поковыряв получилось сделать рабочим. Спасибо, благодаря вам проблему удалось решить. Если кому понадобится, вот тестовый код страницы выводящей ссылку на картинку той кнопки на которую мы нажали.

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>Item name</title>
  <link rel="stylesheet" type="text/css" href="/resources/static/css/styles.css">
</head>

<body style="margin: 0">
  <div class="page" style="margin: 0">
    <div th:each="link, iStat : ${_links}">
      <input type="image" th:src="${link}" value="Click me" onclick="buttonClick(this)">
    </div>
  </div>

  <script type="text/javascript">
    function buttonClick(e) {
      var att = e.getAttribute('src');
      alert(att);
    }
  </script>
</body>

</html>

1
  • Рад что вы справились. Извените, я не запускал код, просто описал идею. 2 фев 2022 в 17:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.