jQuery：如何获取多个img的src值

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数量增加并且循环显示img标签的src值相同，循环才会停止。

而我需要的是单击class product_imgfiles类后获取img标签的src值。 单击时如何获取每个img类的每个src值？ 谢谢。

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对象都将相同。 那是你要的吗？ 如果是这样，那就太好了！ 如果不是，则应将这些值存储为PHP中每个img元素的属性（例如， data-product_token='$product_token' ），然后在JS中使用$(this).attr('data-product_token')或$(this).data('product_token') 。