Javascript 单击时的全屏图像

Javascript 单击时的全屏图像,javascript,html,css,Javascript,Html,Css,我有一个前后的图片列表,每一张都是300px乘300px。 当你点击每一张图片时,它会使点击的图片全屏显示。 然而,它只在全屏上显示第一幅图像,所以如果你点击pic5,它将全屏显示pic1 怎么可能 我修正了我的脚本,将每个图像独立地边缘化,而不仅仅是第一个图像 $(文档).ready(函数(){ $('.gallery_pics')。单击(功能(e){ $('.gallery_pics')。toggleClass('全屏'); }); }); .gallery\u图片\u支架{ 边框:px实

我有一个前后的图片列表,每一张都是300px乘300px。 当你点击每一张图片时,它会使点击的图片全屏显示。 然而,它只在全屏上显示第一幅图像,所以如果你点击pic5,它将全屏显示pic1

怎么可能 我修正了我的脚本,将每个图像独立地边缘化,而不仅仅是第一个图像

$(文档).ready(函数(){
$('.gallery_pics')。单击(功能(e){
$('.gallery_pics')。toggleClass('全屏');
});
});
.gallery\u图片\u支架{
边框:px实心绿色;
宽度:100%;
文本对齐:居中;
高度:350px;
显示:表格;
}
.画廊图片{
显示:内联块;
宽度:300px;
高度:300px;
利润率:10px;
文本对齐:居中;
背景色:#3C0;
}
.图库图片图片{
宽度:100%;
身高:100%;
}
.画廊图片:悬停{
光标:指针;
}
.gallery_图片全屏图像{
宽度:100%;
身高:100%;
}
.gallery_图片全屏{
z指数:9999;
位置:固定;
保证金:0自动;
宽度:90%;
身高:90%;
最高:5%;
左:5%;
背景色:#0FF;
}

使用
而不是
$('.gallery_pics')
来处理事件中单击的元素:

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

使用
this
而不是
$('.gallery_pics')
来处理事件中单击的元素:

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

您需要参考元素本身并不是全部单击的
。gallery\u图片

$(文档).ready(函数(){
$('.gallery_pics')。单击(功能(e){
//在这里更改选择器
$(this.toggleClass('fullscreen');
});
});
.gallery\u图片\u支架{
边框:px实心绿色;
宽度:100%;
文本对齐:居中;
高度:350px;
显示:表格;
}
.画廊图片{
显示:内联块;
宽度:300px;
高度:300px;
利润率:10px;
文本对齐:居中;
背景色:#3C0;
}
.图库图片图片{
宽度:100%;
身高:100%;
}
.画廊图片:悬停{
光标:指针;
}
.gallery_图片全屏图像{
宽度:100%;
身高:100%;
}
.gallery_图片全屏{
z指数:9999;
位置:固定;
保证金:0自动;
宽度:90%;
身高:90%;
最高:5%;
左:5%;
背景色:#0FF;
}

您需要参考这一点元素本身并没有点击所有的
。gallery\u图片

$(文档).ready(函数(){
$('.gallery_pics')。单击(功能(e){
//在这里更改选择器
$(this.toggleClass('fullscreen');
});
});
.gallery\u图片\u支架{
边框:px实心绿色;
宽度:100%;
文本对齐:居中;
高度:350px;
显示:表格;
}
.画廊图片{
显示:内联块;
宽度:300px;
高度:300px;
利润率:10px;
文本对齐:居中;
背景色:#3C0;
}
.图库图片图片{
宽度:100%;
身高:100%;
}
.画廊图片:悬停{
光标:指针;
}
.gallery_图片全屏图像{
宽度:100%;
身高:100%;
}
.gallery_图片全屏{
z指数:9999;
位置:固定;
保证金:0自动;
宽度:90%;
身高:90%;
最高:5%;
左:5%;
背景色:#0FF;
}

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

$(document).ready(function(){
  $('.gallery_pics').click(function(e){
    $(this).toggleClass('fullscreen'); 
  });
});
在click函数中使用“this”来获取被单击的元素,在click处理程序中使用类名将选择具有该类名的所有元素

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

你需要参考
这个
元素点击了自己,不是所有的
图库图片
你没事我不敢相信我错过了这个谢谢你别忘了把它标记为解决方案你需要参考
这个
元素点击了自己,不是所有的
图库图片
你没事我不敢相信我错过了这个谢谢别忘了把它标为已解决