Как получить определенное значение с помощью кнопки jquery?

Question

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

     <% if(files || files == null) { %>
           <% files.forEach(function(file) { %>
                 <% if(file.isImage){ %>
                     <!-- Single Product -->
                  <div class="col-12 col-sm-6 col-lg-4" 
                  id="single_product">
                   <div class="single-product-wrapper">
                   <!-- Product Image -->
                   <div class="product-img">
                   <a href="/<%=file.filename %>">
                   <img  src="image/<%=file.filename %>" 
                  alt=""></a>

                <div class="add-to-cart-btn">

                <button type="button" id="addToCart"class="btn essence-btn" 
                 >Add to Cart</button>
               </div>

             <% } else { %>
            <p>ERROR</p>
            <% } }) } else {%>
            <p>No files</p>
            <% } %>

JQUERY FILE

     <script type="text/javascript">
   $(document).ready(function(){
   $('#addToCart').click(function(){

     });
     });
   </script>

Я не знаю, как это реализовать.Любые советы

Answer 1

Похоже, ваша кнопка addToCart имеет идентификатор и находится внутри цикла for - так что это не хорошо.Идентификаторы: уникальные - используйте класс, а затем используйте экземпляр this, чтобы получить правильный атрибут src:

Обновить фрагмент HTML:

<button type="button" class="btn essence-btn js-btn-add-to-cart">Add to Cart</button>

Обновлено JS:

$(document).ready(function(){
    $('.js-btn-add-to-cart').click(function(){
        var clickedImageSrc = $(this).closest(".single-product-wrapper").find("img").attr("src");
    });
});