Javascript onClick使用jquery标记当前div显示

我正在处理图像库，我想在其中单击定位标记当前图像显示。库容器不工作。前面的图片

img

点击，我得到了输出

。画廊栏目img

$('.gallery-column img').on('click', function(){
    var expandImg = document.getElementById('expandedImg');
    expandImg.src = this.src;
    expandImg.parentElement.style.display = "block";
    var imageCaption = $(this).next("div").html();
    $("#expandedImgCaption").html(imageCaption);
});

此代码运行良好。现在我添加了锚，它不工作。 我试过了，但没能成功

有人能推荐我吗

$（文档）.ready（函数（）{
var carouselImg=document.getElementsByClassName（'carousel-img'）；
$（'a.post-carousel'）。在（'click'，function（）上{
var expandImg=document.getElementById（'expandedImg'）；
var carouselImg=document.getElementsByClassName（'carousel-img'）；
expandImg.src=carouselImg.src；
expandImg.parentElement.style.display=“block”；
var imageCaption=$（this.next（“div”）.html（）；
$（“#expandedImgCaption”）.html（图像字幕）；
});
});
*{
框大小：边框框；
}
.画廊包装{
宽度：50%；
高度：1066px；
保证金：0自动；
显示器：flex；
}
.画廊街{
宽度：52%；
最大高度：497px；
}
.画廊专栏{
位置：相对位置；
填充：10px；
}
.img标题{
位置：绝对位置；
底部：10%；
}
.图库栏img{
宽度：100%；
不透明度：0.8；
光标：指针；
}
.图库列img：悬停{
不透明度：1；
}
.画廊容器{
位置：相对位置；
宽度：90%；
高度：500px；
}
#膨胀剂{
宽度：100%；
身高：100%；
}

尝试按以下方式使用：


$（文档）.ready（函数（）{
var carouselImg=document.getElementsByClassName（'carousel-img'）；
$（'a.post-carousel'）。在（'click'，function（）上{
var expandImg=document.getElementById（'expandedImg'）；
expandImg.src=$（this.find（'img'）.attr（'src'）；
var imageCaption=$（this.find（'.img caption>h3'）.text（）；
$（'.gallery container'）。查找（'.img caption>h3'）。文本（imageCaption）；
});
});
*{
框大小：边框框；
}
.画廊包装{
宽度：50%；
高度：1066px；
保证金：0自动；
显示器：flex；
}
.画廊街{
宽度：52%；
最大高度：497px；
}
.画廊专栏{
位置：相对位置；
填充：10px；
}
.img标题{
位置：绝对位置；
底部：10%；
}
.图库栏img{
宽度：100%；
不透明度：0.8；
光标：指针；
}
.图库列img：悬停{
不透明度：1；
}
.画廊容器{
位置：相对位置；
宽度：90%；
高度：500px；
}
#膨胀剂{
宽度：100%；
身高：100%；
}
使用
this
关键字以相关
.carousel img
为目标即可实现

注意1:您没有将id
expandedImgCaption
附加到
expandedImg
的
img caption
：

<div id="expandedImgCaption" class="img-caption">


$（文档）.ready（函数（）{
$（'a.post-carousel'）。在（'click'，function（）上{
$（'expandedImg'）.attr（'src'，$（'.carousel img'，this.attr（'src'））.parent（）.show（）；
$（“#expandedImgCaption”）.html（$（'.img caption'，this.html（））；
});
});
*{
框大小：边框框；
}
.画廊包装{
宽度：50%；
高度：1066px；
保证金：0自动；
显示器：flex；
}
.画廊街{
宽度：52%；
最大高度：497px；
}
.画廊专栏{
位置：相对位置；
填充：10px；
}
.img标题{
位置：绝对位置；
底部：10%；
}
.图库栏img{
宽度：100%；
不透明度：0.8；
光标：指针；
}
.图库列img：悬停{
不透明度：1；
}
.画廊容器{
位置：相对位置；
宽度：90%；
高度：500px；
}
#膨胀剂{
宽度：100%；
身高：100%；
}
img标题未更改。
$("#expandedImgCaption").html($('.img-caption', this).html());