jQuery用下一个父母的孩子替换内容答案

【问题标题】：jQuery replace content with child of next parentjQuery用下一个父母的孩子替换内容
【发布时间】：2018-02-17 17:46:40
【问题描述】：

我想创建一个包含 div 内容的灯箱，但现在找不到比自己做更好的方法了。我想用下一个替换当前内容。这是我的代码：

<div class="gallery_pic">
    <div class="content">
        <div class="content_inner">
            <img src="img"/>
            <p>content text</p>
        </div>
        <div class="icon_right"></div>
        </div>
        <img src="img" />
   </div>

   <div class="gallery_pic">
        <div class="content">
            <div class="content_inner">
                <img src="img2"/>
                <p>content text</p>
            </div>
            <div class="icon_right"></div>
        </div>
        <img src="img2" />
    </div>    
</div>

<script>
    $('.gallery_pic').click(function(){
        $('.content', this).show(); 
    });

    $('.icon_right').click(function(){
        $('.content').replaceWith( ??? );
     });

</script>

当单击图库图片时，会打开包含其内容的灯箱，当单击 icon_right 时，应显示下一个父级的下一个 .content 而不是当前的。我该怎么做？

谢谢！

【问题讨论】：

标签： jquery parent lightbox children replacewith

【解决方案1】：

第一个：虽然.icon_right 是.gallery_pic 的一部分，但您需要event.stopPropagation()

第二个：你需要隐藏其他内容$('.content').hide();

<script>
    $('.gallery_pic').click(function(){
        $('.content').hide();         //<<<<<<<<
        $('.content', this).show(); 
    });

    $('.icon_right').click(function(event){
        event.stopPropagation();      //<<<<<<<<
        $(this).closest('.gallery_pic').next('.gallery_pic').click()
     });

</script>

使用.next('.gallery_pic') 获取下一个元素.. 对于上一个元素，您可以使用.prev('.gallery_pic')

注意：制作灯箱的方法还有很多取决于你打算做什么..上面的代码可以使用你的方式..但如果你需要另一种方式，你可以使用data属性为每个img 使用一个灯箱来显示图像

你也可以添加

$('.content').click(function(event){
  event.stopPropagation();      //<<<<<<<<
});

【讨论】：