Question

我有一张前后照片列表，每张照片都是300像素×300像素。当你点击每个图像时，它应该将点击的图像全屏显示。然而，它只会在全屏幕上显示第一张图像，所以如果你点击图片5就会全屏显示图片。

怎么可以我修复了我的脚本以独立地渲染每个图像，而不仅仅是第一个图像？

$(document).ready(function() {
  $('.gallery_pics').click(function(e) {
    $('.gallery_pics').toggleClass('fullscreen');
  });
});

.gallery_pics_holder {
  border: px solid green;
  width: 100%;
  text-align: center;
  height: 350px;
  display: table;
}
.gallery_pics {
  display: inline-block;
  width: 300px;
  height: 300px;
  margin: 10px;
  text-align: center;
  background-color: #3C0;
}
.gallery_pics img {
  width: 100%;
  height: 100%;
}
.gallery_pics:hover {
  cursor: pointer;
}
.gallery_pics.fullscreen img {
  width: 100%;
  height: 100%;
}
.gallery_pics.fullscreen {
  z-index: 9999;
  position: fixed;
  margin: 0 auto;
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
  background-color: #0FF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="gallery_pics_holder">

  <div class="gallery_pics">
    <img src="images/before1.jpg" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after1.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/before2.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after2.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/before3.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after3.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/before4.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after4.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/before5.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after5.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/before6.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after6.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/before7.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after7.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/before8.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after8.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/before9.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after9.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/before0.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->
  <div class="gallery_pics">
    <img src="images/after0.jpg" width="300px" height="300px" alt="">
  </div>
  <!--gallery_header-->

Answer 1

你需要参考这个元素点击本身而不是全部.gallery_pics

＆＃13;

$(document).ready(function() {
  $('.gallery_pics').click(function(e) {
    // Change Selector Here
    $(this).toggleClass('fullscreen');
  });
});

＆＃13;

.gallery_pics_holder {
  border: px solid green;
  width: 100%;
  text-align: center;
  height: 350px;
  display: table;
}
.gallery_pics {
  display: inline-block;
  width: 300px;
  height: 300px;
  margin: 10px;
  text-align: center;
  background-color: #3C0;
}
.gallery_pics img {
  width: 100%;
  height: 100%;
}
.gallery_pics:hover {
  cursor: pointer;
}
.gallery_pics.fullscreen img {
  width: 100%;
  height: 100%;
}
.gallery_pics.fullscreen {
  z-index: 9999;
  position: fixed;
  margin: 0 auto;
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
  background-color: #0FF;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery_pics_holder">
  <div class="gallery_pics">
    <img src="http://lorempixel.com/300/300/sports">
  </div>
  <div class="gallery_pics">
    <img src="http://lorempixel.com/300/300/nature">
  </div>
  <div class="gallery_pics">
    <img src="http://lorempixel.com/300/300/">
  </div>
</div>

＆＃13;

Answer 2

使用public function handle($request, Closure $next) { // If the user is not logged in if(!Auth::user()){ return redirect('login'); } // If the user is inactive if(!Auth::user()->active){ return redirect('inactive'); } return $next($request); }代替this来解决事件中点击的元素：

$('.gallery_pics')

Answer 3

在click函数中使用“this”来获取被点击的元素，使用click处理程序中的className将选择具有该类名的所有元素

$(document).ready(function(){
  $('.gallery_pics').click(function(e){
    $(this).toggleClass('fullscreen'); 
  });
});

点击时全屏图像

3 个答案: