jquery - 隐藏和显示按钮单击 w/.hide() 上的元素？

Question

我一直在尝试寻找如何使用 jQuery 隐藏和显示一组段落。我想找到一种方法来使用相同的按钮，并使用 .hide() 和 .show()。我不知道这是否可能或“正确”，但我对 javascript 比较陌生，正在尝试自学。

这是一个小提琴，展示了我到目前为止所做的事情：http: //jsfiddle.net/GAa23/

我的问题是我可以隐藏它，但我无法让按钮在第二次点击时显示元素。

$(document).ready(function () {
var btn = 1;
var advancebtn = function () {
    btn++;
};

var reducebtn = function () {
    btn--;
};

if (btn >= 1) {
    $("button").click(function () {
        reducebtn();
        $("p").hide();
    });
} else {
    $("button").click(function () {
        advancebtn();
        $("p").show();
    });
}
});

Answer 1

那么问题是你从不运行第二个点击事件处理程序。您的代码在页面就绪时运行，并且 if 语句if (btn >= 1) {不会转到 else。

试试这个：

$("button").click(function () {
    $("p").toggle();
});

演示在这里

或者，将 if 语句放在 click 处理程序中：

$("button").click(function () {
    if (btn >= 1) {
        reducebtn();
        $("p").hide();
    } else {
        advancebtn();
        $("p").show();
    }
});

演示在这里

Answer 2

将你的 if/else 放在 click 事件中，否则你只是连接了隐藏处理程序。

$("button").click(function () {
    if (btn >= 1) {
        reducebtn();
        $("p").hide();
    } else {
        advancebtn();
        $("p").show();
    }
});

Answer 3

如果您只想显示/隐藏 <p> 尝试

$("button").click(function() {
   $("p").toggle(); 
});

您还可以使用$("p").toggle("slow");或将动画添加到切换$("p").toggle("fast");

通过使用 show(); 使用您的具体示例；和隐藏（）；以及我认为您要实现的逻辑：

$("button").click(function () {
    if (btn >= 1) {
        reducebtn();
        $("p").hide();
    } else {
        advancebtn();
        $("p").show();
    }
});