jQuery：將 CSS 添加到父級

Question

我使用彈出窗口並希望可以關閉它們。

這是我的代碼：

 $(".close").click(function() { $(".window").css("display", "none"); });

 * { margin: 0; padding: 0; font-family: Arial; } .window { width: 300px; height: 300px; background-color: tomato; margin: 10px; padding: 10px; } .close { float: right; } .close:hover { color: white; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="window">Hi. <div class="close">X</div> </div> <div class="window">I love you. <div class="close">X</div> </div> <div class="window">Thanks. <div class="close">X</div> </div>

如果單擊一個X ，所有窗口都會消失。 但只有點擊的窗口應該消失。

怎么可能做到這一點？ :)

非常感謝您的幫助！ <3

Answer 1

嘗試以下

$(".close").click(function() {
  $(this).parents('.window').css("display", "none");
});

演示 - https://codepen.io/vyspiansky/pen/zYqNxXd