-2

一般来说，我对 Jquery 和 Javascript 还很陌生，我想知道，隐藏某些内容后如何更改按钮上的文本。

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

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

并展示一些东西：

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

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

我该如何做到这一点？

4

4 回答 4

2

您只需要一个按钮并更改其文本。让我们假设所有内容从一开始都是可见的。在您的 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';
    });
});

演示

参考： .click , .toggle, .text,条件运算符。

您必须调整选择器以仅匹配您真正想要隐藏的元素，但 jQuery 有关于所有可能选择器的优秀文档。

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

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

于 2013-02-09T12:44:19.677 回答
1

隐藏：

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

显示：

$("element").click(function() {
        $("element2").fadeIn("slow");
        $("element").text('Hide');
    });
于 2013-02-09T12:41:13.267 回答
1

更改按钮值，例如 

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

    $("element").click(function() {
        $("element2").fadeIn("slow");
    $("#btnID").prop('value', 'Hide');
    });
于 2013-02-09T12:43:43.813 回答
0

我通常有两个按钮，一个带有文本显示，另一个带有隐藏文本，然后当您单击其中一个按钮时，会显示一个并制作所有必要的东西并将其隐藏起来。

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可以帮助你：

于 2013-02-09T12:44:49.050 回答