修改腳本以關閉Div

Question

我有一個很好的小展示，它一次只顯示一個div，我在以下位置找到它： 隨機代碼片段 （第二個演示向下），如下所示：

function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}

它唯一不執行的操作是在打開div之后將其關閉。 目前，我將兩個div都設置為顯示：none，並希望為用戶提供在完成查找后將它們都關閉的選項。

任何想法如何修改此？

Answer 1

您可以單擊事件將其單擊時將其關閉：

$('.newboxes').click( function() {
    $(this).hide(600);
});

Answer 2

您必須向用戶提供按鈕或其他東西以關閉div。 假設每個div中都有一個這樣的按鈕：

的HTML

<div class="div-class">
    <p>Box content</p>
    <button class="close">Close</button>
</div>

jQuery的

$('.close').on('click', function() {
   $(this).closest('.div-class').hide();
});

Answer 3

在if語句中添加有關當前項目可見性的條件：

function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone && $(this).css("display") == "none") {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}