Question

我对Jquery和Javascript很新，我很想知道，如何在隐藏某些内容后更改按钮上的文字。

据我所知，你通过这段代码隐藏了一些东西：

$("element").click(function() {
    $("element2").hide("slow");
});

并展示一些东西：

$("element").click(function() {
    $("element2").fadeIn("slow");
});

所以我想做的是有一个文章类型的东西，当按下“隐藏”按钮时，它隐藏所有段落文本，但留下另一个按钮说“显示”

我如何做到这一点？

Answer 1

您只需要一个按钮即可更改其文字。让我们假设所有内容从一开始就可见。在HTML中添加一个按钮并为其指定一个ID，以便您轻松识别它：

<button id="toggleButton" type="button">Hide</button>

然后将事件处理程序绑定到

按钮

切换要显示/隐藏的元素的可见性和
更改按钮的文字内容

这就是：

$('#toggleButton').click(function() {
    // toggle visibility if all p elements
    $('p').toggle();

    // Change text based on current text
    // If the current text is 'Hide' then we just hid the elements and
    // we have to change the text to 'Show' (and vice versa).
    $(this).text(function(i, current_text) {
        return current_text === 'Hide' ? 'Show' : 'Hide';
    });
});

DEMO

参考： .click，.toggle，.text，conditional operator。

你必须调整选择器才能匹配你真想隐藏的元素，但是jQuery有great documentation about all possible selectors。

jQuery的文档相当广泛，花一些时间阅读是值得的。

由于您刚刚开始，我建议您阅读http://eloquentjavascript.net/和/或MDN JavaScript Guide以及jQuery tutorial（按此顺序）。

Answer 2

隐藏：

$("element").click(function() {
    $("element2").hide("slow");
    $("element").text('Show');
});

显示：

$("element").click(function() {
        $("element2").fadeIn("slow");
        $("element").text('Hide');
    });

Answer 3

更改按钮值，如

    $("element").click(function() {
    $("element2").hide("slow");
    $("#btnID").prop('value', 'Show');
    }); 

    $("element").click(function() {
        $("element2").fadeIn("slow");
    $("#btnID").prop('value', 'Hide');
    });

Answer 4

我通常有两个按钮，一个带有文本显示，另一个带有隐藏文字，然后当你点击其中一个时显示一个并完成所有必要的东西并隐藏它。

HTML：

<a href="#" id="bshow" style="display:block"> Show </a>
<a href="#" id="bhide" style="display:none"> Hide </a>
<p id="textshow"  style="display:none"> lorem ipsum</p>

使用Javascript：

$('#bshow').click(function() {
    $('#bhide').fadeIn();
    $('#textshow').fadeIn();
    $(this).hide();
});

我认为jsFiddle可以帮助您：

隐藏然后通过jquery显示一些东西

4 个答案: