jQuery: Как получить значение src для нескольких img

Question

У меня есть этот PHP-скрипт для создания миниатюр каталога. количество файлов внутри этого каталога динамично:

<? 
    if (isset ($product_imgfiles)) { 
     echo '<div class="row">'; 

     for ($i=2; $i<($num_product_imgfiles+2); $i++) { 
      echo '<div class="col-xs-4 col-md-2" style="padding-left: 7px; padding-right: 7px;"> 
        <a href="#" class="thumbnail product_imgfiles"> 
         <img src="'. $directory . $product_imgfiles[$i] .'" style="margin-bottom: 5px;"> 
         <span><i class="fa fa-times-circle"></i> hapus</span> 
        </a> 
       </div>'; 
     } 

     echo '</div>'; 
    } 
?> 

и у меня есть этот JQuery, чтобы слушать это событие каждый раз, когда миниатюра щелкнула:

echo ' 
$(".product_imgfiles").each(function(index) { 
    $(".product_imgfiles").click(function() { 
     event.preventDefault(); 
     var img_files = $(".product_imgfiles img").attr("src"); 
     alert(img_files); 
     alert(\''.$product_token.'\'); 
     alert('.$secret_token.'); 
    }); 
}); 

'; 

JQuery часть способна показать предупреждающее сообщение. но, к сожалению, цикл не остановится до номера product_imgfiles, и он показывает то же значение srcimg.

В то время как мне нужно получить src значение img тег после нажатия на класс product_imgfiles. как получить каждый src значение каждого img класс, когда его нажимают? Спасибо.

Answer 1

Удалите петлю .each.

.click() по своей сути применяет его к каждому элементу уже, вам не нужно снова перебирать их.

echo ' 
    $(".product_imgfiles").click(function(event) { 
     event.preventDefault(); 
     var img_files = $(this).children('img').attr("src"); 
     alert(img_files); 
     alert(\''.$product_token.'\'); 
     alert('.$secret_token.'); 
    }); 
'; 

Кроме того, вам нужно на самом деле передать переменную event в конструктор. Как было указано в комментариях, вы ссылаетесь на текущий объект, который нажал this, вместо того, чтобы снова использовать селектор.

Кроме того, этот путаный бит с токеном продукта и секретным токеном немного странный. Это будет одинаково для каждого объекта .product_imgfiles. Это то, что вы хотите? Если это так, это хорошо! Если нет, вы должны сохранить эти значения в качестве атрибута для каждого элемента img в PHP (например, data-product_token='$product_token'), а затем обратиться к ним в JS с чем-то вроде $(this).attr('data-product_token') или $(this).data('product_token').