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の数まで停止せず、同じsrc値imgタグを示します。

私が必要としているのは、product_imgfilesをクリックしたときに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'）。次に、$(this).attr('data-product_token')または$(this).data('product_token')のようなものをJSで参照してください。