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');
        }



    });
});