按钮上的隐藏和显示元素单击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) {不会转到其他位置。

请改为尝试：

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

演示here

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

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

演示here

Answer 2

将你的if / else放在click事件中，否则你只是挂钩hide处理程序。

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

Answer 3

如果您只想显示/隐藏＆lt; p＆gt;尝试

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