Question

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

(pd.DataFrame(work_station, columns=['station'])
  .assign(foo=1)
  .merge(df.assign(foo=1))
  .drop('foo', 1)
)

   station   name  salary
0        A   Mike   60000
1        A    Tom   50000
2        A  Scott  100000
3        A  Tracy   90000
4        B   Mike   60000
5        B    Tom   50000
6        B  Scott  100000
7        B  Tracy   90000
8        C   Mike   60000
9        C    Tom   50000
10       C  Scott  100000
11       C  Tracy   90000

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

Answer 2

您的代码不起作用，因为您使用ID进行隐藏。 dom ID中的ID应该是唯一的

如果要在准备好文档时使用hide（）方法，则需要第二点。那么您应该使用CSS代替JS。喜欢

 <style>
 .theimage{
   display:none
  }
</style>

我正在一点点更新您的laravel模板代码。为包装器添加div

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

现在，当我们单击那里的名称时，我们只能显示特定的图像。

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

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

2 个答案: