jQuery 切換隱藏/顯示

Anika Tabassum Era 2023年1月30日 2022年7月18日
  1. 使用 jQuery 的 toggle() 方法來切換隱藏/顯示
  2. 使用 hide()show() 方法切換隱藏/顯示
jQuery 切換隱藏/顯示

jQuery 庫最大限度地減少了一堆程式碼的使用,並有助於使用更少的程式碼行解決方案。

直到 jQuery 1.8 版本,toggle() 方法被廣泛使用,在 1.8 版本中,它被棄用了。在 1.9 版中,它使用不同的標記被刪除。

我們將在我們的示例中討論 toggle() 函式是如何工作的,以及為什麼稍後不鼓勵使用它。另一種瞭解切換行為解決方案的方法是使用 show()hide() 方法。

對此,我們會考慮條件語句,因此我們可以使用一個按鈕來執行切換任務。讓我們深入研究例項以獲得更好的視覺化。

使用 jQuery 的 toggle() 方法來切換隱藏/顯示

toggle() 方法的用例中,我們通常通過 click 事件觸發它。同樣,在該方法的實現中,還有另一個 click 事件以及 preventDefault()

因此,它使雙擊事件無效,並且應該可以正常工作。但是該方法過於直接,如果事件被呼叫超過兩次,通常會導致問題。

所以,為了擺脫這種模稜兩可的特點,後來,該方法被刪除了。然而,它仍然被視為用於顯式,它可以用更少的程式碼行而不是以任何其他方式使用。

讓我們看一下用於演示該函式的程式碼。

程式碼片段:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
  $("#ele1").click(function(){
    $("#ele2").toggle(1500);
  });
});
</script>
</head>
<body>
<p id='ele2'>Content to be toggled.</p>
<button id='ele1'>Show / Hide</button>

輸出:

使用 jQuery 的 toggle()方法來切換

使用 hide()show() 方法切換隱藏/顯示

在這裡,我們將啟動 click 事件的例項,然後生成一個條件語句來檢查單擊按鈕時內容是否可見。如果它驅動到一個真實案例,我們將其設定為 hide();否則,我們將其設定為 show()

讓我們檢查程式碼塊並檢查過程。

程式碼片段:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
  $("#ele1").click(function(){
    var x = $('#ele2');
    if(x.is(':visible')){
      x.hide("slide");
    }
    else{
      x.show("slide");
    }

  });
});
</script>
</head>
<body>
<p id='ele2'>Content to be toggled.</p>
<button id='ele1'>Show / Hide</button>

輸出:

使用 hide() 和 show() 方法切換

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相關文章 - jQuery Toggle