$（this.hide（）；不'；无论发生什么，都不要关闭弹出的div。jQuery

我正在努力关闭一个弹出窗口，它只需点击一下就可以显示出来，但由于一些我不清楚的原因，它不起作用

以下是HTML结构：

<div id="buttons">
    <div class="content-wrapper">
        <h2>Some title</h2>
        <div class="red-divider"></div>
        <div class="buttons">
            <div class="btn">
                <div class="popup">Description 1</div>
                <div class="btn1"></div>
                <p>some text goes here</p>
            </div>
            <div class="btn">
                <div class="popup">Description 2</div>
                <div class="btn2"></div>
                <p>some text goes here</p>
            </div>
            <div class="btn">
                <div class="popup">Description 3</div>
                <div class="btn3"></div>
                <p>some text goes here</p>
            </div>
            <div class="btn">
                <div class="popup">Description 4</div>
                <div class="btn4"></div>
                <p>some text goes here</p>
            </div>
            <div class="btn">
                <div class="popup">Description 5</div>
                <div class="btn5"></div>
                <p>some text goes here</p>
            </div>
        </div>
    </div>
</div>

jQuery代码：

jQuery(document).ready(function ($) {

    $('.btn').on('click', function() {
        $('.popup').hide();
        $(this).find('.popup').show();
    });

    $('.popup').on('click', function() {
        $(this).hide();
    });
});

所以，当我单击每个按钮时，它会成功地关闭现有的弹出div并打开正确的一个。这意味着第一个

$（'.popup'）.hide（）确实有效，但是

第二个
$（this.hide（）不起作用。我尝试了
$（'.popup'）.hide（）仍然没有运气。问题是，我以前曾几次使用此代码关闭类似的弹出窗口，它工作得非常好

另外，在开始时，我有一行代码用来显示popup div
$（this）.next（'.popup'）.show（）
但直到
.next（）
更改为
.find（）
后，它才起作用。只是不明白，有人能解释一下有什么区别吗？它应该是双向的

我是jQ的初学者，可能缺少一些基本的东西

谢谢你的帮助。
谢谢。
用于防止
.btn
单击事件

jQuery(document).ready(function ($) {

    $('.btn').on('click', function() {
        $('.popup').hide();
        $(this).find('.popup').show();
    });

    $('.popup').on('click', function(e) {
        e.stopPropagation();
        $(this).hide();
    });
});

.popup
位于div
.btn
内。当点击
.popup
div时，两者都会被触发，这就是为什么它不会隐藏

在此场景中，当您单击弹出窗口作为其父元素时，会调用btn click事件。因此，弹出显示一次又一次。您可以选择在jquery中阻止它的调用停止

stopPropagation（）是一种方法，用于停止将事件冒泡到父元素，从而防止执行任何父事件处理程序

这里您需要将事件对象作为参数传递，我在这里使用了'e'
请按照以下步骤更正代码：

jQuery(document).ready(function ($) {  

    $('.btn').on('click', function() {
       $('.popup').hide();
       $(this).find('.popup').show();
    });

    $('.popup').on('click', function(e) {
        e.stopPropagation();
        $(this).hide();
    });
});

.next（）选择器获取同级，.find（）获取子级和grandchildren@nrvnm：很高兴能帮助你谢谢@Sam1604，这是一个更直观的版本。在我看来也是一样的。可能是@Feroza还没有看到之前的答案。它是。。刚刚注意到。。。给出清晰的答案是很重要的，这样初学者才能完全理解
jQuery(document).ready(function ($) {  

    $('.btn').on('click', function() {
       $('.popup').hide();
       $(this).find('.popup').show();
    });

    $('.popup').on('click', function(e) {
        e.stopPropagation();
        $(this).hide();
    });
});