Javascript jQuery根据按钮被单击的次数更改元素

我不知道我是否只是不知道如何使用

.toggle（）

，或者我只是在编写

.click（）

函数，但本质上我希望在单击按钮时发生两种不同的情况，这取决于它是否被切换

基本上，如果单击按钮，我希望显示隐藏的div，并希望更改按钮的文本。然后，当再次单击时，div将再次隐藏，文本将变回以前的状态

$（文档）.ready（函数（）{
var计数=0；
$（“#下拉切换按钮”）。单击（函数（）{
计数++；
如果（计数%2！==0）{
//在奇数单击时执行此操作
$（'#下拉列'）.css（'display'，'block'）；
$（“#下拉切换按钮”）.text（“切换按钮”）；
}否则如果（计数%2==0）{
//在偶数点上，您可以执行此操作
$（“#下拉列”）.css（'display'，'none'）；
$（“#下拉切换按钮”）.text（“未切换按钮”）；
};
});
});
#下拉栏{
显示：无；
}

标题
你好，陌生人

您唯一的问题实际上是语法错误

首先，您忘记添加额外的}）；关闭外部document.ready功能

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



    });
});

接下来，在else if之前有一个分号。这告诉javascript它开始读取另一条语句，而不是继续读取之前的if语句，这意味着“else”不知道自己要连接到什么

如果您想进一步细化代码，else后面的If语句是多余的，如果只有两个状态，那么您可以这样做

if（语句作为true传递）{
//做事
}
否则{
//你的代码在这里
}
您唯一的问题实际上是语法错误

首先，您忘记添加额外的}）；关闭外部document.ready功能

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



    });
});

接下来，在else if之前有一个分号。这告诉javascript它开始读取另一条语句，而不是继续读取之前的if语句，这意味着“else”不知道自己要连接到什么

如果您想进一步细化代码，else后面的If语句是多余的，如果只有两个状态，那么您可以这样做

if（语句作为true传递）{
//做事
}
否则{
//你的代码在这里
}
看起来您的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');
    }
  });
});

看起来paren/curly括号匹配在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');
    }
  });
});

根据jQuery文档，（）

没有参数，.toggle（）方法只需切换可见性
构成要素：

匹配的元素将立即显示或隐藏，而不会显示
动画，通过更改CSS显示属性。如果元素是
最初显示时，它将被隐藏；如果隐藏，它将显示。
显示特性将根据需要进行保存和还原。如果一个元素
如果显示值为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');
        }



    });
});

根据jQuery文档，（）

没有参数，.toggle（）方法只需切换可见性
构成要素：

匹配的元素将立即显示或隐藏，而不会显示
动画，通过更改CSS显示属性。如果元素是
最初显示时，它将被隐藏；如果隐藏，它将显示。
显示特性将根据需要进行保存和还原。如果一个元素
如果显示值为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');
        }



    });
});

发生在我们所有人身上：）学习这一点时，我最好的建议是在运行代码时保持浏览器中的控制台窗口打开。然后，您将能够看到您遇到的错误以及错误所在。我们都会遇到这种情况：）学习这一点时，我的最佳建议是在运行代码时保持浏览器中的控制台窗口打开。然后你就可以看到你的错误和它的线路。