動的idはPHPのlaravelフレームワークでJavaスクリプトで生成します

Question

私はJavaScriptのidに問題があります。私のコードズームは最初の画像だけを扱いますが、別の画像では機能しません。 HTML & PHP Laravelコード：

JavaScriptのコード：どのように私は、動的#click_image IDをできますか？なぜ、代わりにクラスを使用していない

Answer 1

？あなたはこのようなIDとそれをバインドするために主張すれば

<img class="click_image " data-zoom-image=""> 

その後、あなたのjs

$(".click_image").data('data-zoom-image').elevateZoom({ 
    responsive : true, 
    scroll : true 
}); 

にあなたは非常に厄介なJavaScriptで終わるだろう。

@foreach($experiencezone as $key => $item) 
...... 
<img id="click_image_{{ $key }}" data-zoom-image=""> 
...... 
@endforeach 
// or if you have id on your collection 
@foreach($experiencezone as $item) 
...... 
<img id="click_image_{{ $item->any_id }}" data-zoom-image=""> 
...... 
@endforeach 

とあなたのjsの

<script> 
@foreach($experiencezone as $key => $item) 
$("#click_image_{{ $key }}").data('data-zoom-image').elevateZoom({ 
    responsive : true, 
    scroll : true 
}); 
@endforeach 
</script> 
// or if you have id on your collection 
<script> 
@foreach($experiencezone as $item) 
$("#click_image_{{ $item->your_id }}").data('data-zoom-image').elevateZoom({ 
    responsive : true, 
    scroll : true 
}); 
@endforeach 
</script>