在 foreach 循环中使用时，Jquery 代码仅对第一个元素起作用

Question

我正在尝试使用 Laravel 和 JQuery 创建一个程序，如果我单击图像名称，就会显示图像。但是，问题是使用 foreach 循环从数据库中检索图像的名称。通过这样做，只有第一个元素起作用。如何修复我的代码，以便在单击时我也能够访问其他元素？

<script>
    $("#theimage").hide();
    $("#nameofimages").on('click',function(){
       $("#theimage").toggle();
    });
</script>

@section('content')
    @foreach($images as $image)
        <p id="nameofimages">{{ $image->imagenames }}</p>
        <img id="theimage" src="/images/{{ $image->imagelocation }}">
    @endforeach
@endsection

Answer 1

只有第一个有效，因为您使用了 id 而不是 class。 id 只能引用 DOM 中的一个元素。

<script>
    $("#theimage").hide();
    $(".nameofimages").on('click',function(){
       $(".theimage").toggle();
    });
</script>

@section('content')
    @foreach($images as $image)
        <p class="nameofimages">{{ $image->imagenames }}</p>
        <img class="theimage" src="/images/{{ $image->imagelocation }}">
    @endforeach
@endsection