jQuery根據單擊按鈕的次數更改元素

Question

我不知道如果我只是不知道如何使用.toggle()或者如果我只是寫了.click()當我點擊一個按鈕取決於功能失常，但基本上我想要兩個不同的事情發生，是否打開。

基本上，如果單擊該按鈕，則希望顯示隱藏的div，並且希望更改按鈕的文本。 然后，當再次單擊它時，div將再次隱藏，文本將恢復為之前的狀態

 $(document).ready( function() { var count = 0; $("#dropdown-toggle-button").click(function() { count++; if (count % 2 !== 0) { // on odd clicks do this $('#dropdown-column').css('display', 'block'); $('#dropdown-toggle-button').text('Toggled Button'); } else if (count % 2 === 0) { // on even clicks do this $('#dropdown-column').css('display', 'none'); $('#dropdown-toggle-button').text('Un-toggled Button'); }; }); }); 

 #dropdown-column { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h2 id="sample-header">Header</h2> <a href="#" id="dropdown-toggle-button">Un-toggled Button</a> <div id="dropdown-column"> <p>Hello, Stranger</p> </div> 

Answer 1

您唯一的問題實際上是語法錯誤！

首先，您忘記添加額外的}）； 關閉外部document.ready功能。

接下來，如果沒有，則使用分號。 這告訴javascript，它正在開始讀取另一條語句，而不是繼續從之前讀取if語句，這意味着“ else”不知道將自身連接到什么。

如果您想進一步完善代碼，則else后面的if語句是多余的，如果只有2個狀態，則可以

if(statement passes as true){
    // do stuff
}
else { 
    // your code here 
}

Answer 2

看起來在您的JavaScript中，括號/彎括號匹配有點偏離。 嘗試這個：

$(document).ready( function() {
  var count = 0;
  $("#dropdown-toggle-button").click(function() {
    count++;

    if (count % 2 !== 0) {
      $('#dropdown-column').css('display', 'block');
      $('#dropdown-toggle-button').text('Toggled Button');
    }
    else {
      $('#dropdown-column').css('display', 'none');
      $('#dropdown-toggle-button').text('Un-toggled Button');
    }
  });
});

Answer 3

根據jQuery文檔，（ http://api.jquery.com/toggle/ ）

沒有參數，.toggle（）方法僅切換元素的可見性：

$( ".target" ).toggle();

通過更改CSS顯示屬性，匹配的元素將立即顯示或隱藏，而不會產生動畫。 如果最初顯示該元素，則它將被隱藏； 如果隱藏，它將顯示。 display屬性將根據需要保存和恢復。 如果一個元素的顯示值為inline，則將其隱藏並顯示，它將再次以inline顯示。

因此，盡管您編寫的代碼應該可以正常工作，但這並不是一個很干凈的解決方案。 我建議使用jquery內置的.toggle函數。

$(document).ready( function() {

    $("#dropdown-toggle-button").click(function() {

        // first toggle the display of the column element
        $('#dropdown-column').toggle();

        // then check for its display status
        // http://api.jquery.com/visible-selector/
        if ($('#dropdown-column').is(':visible')) {
            // display: block
            $('#dropdown-toggle-button').text('Toggled Button');

        } else {
            // display: none
            $('#dropdown-toggle-button').text('Un-toggled Button');
        }



    });
});