Question

这个javascript没问题。隐藏并在表格中显示一列。

<input id="toggle" type="button" value="Toggle Search"/>

$(function () {
    $('#toggle').click(function () {
       $('#searchtd').toggle();
    });
});

但是，我也希望能够更改切换按钮上的标题。

<input id="toggle" type="button" value="Hide Search"/>

$(function () {
    $('#toggle').click(function () {
        $('#searchtd').toggle()
        (this).text(function (i, v) {
            return v === 'Hide Search' ? "Show Search" : 'Hide Search';
        })
     });
});

在这种情况下，表中的列会隐藏并显示，但标题不会更改...

Answer 1

要更改按钮的值，请使用.val()，而不是.text()：

$(function () {
    $('#toggle').click(function () {
        $('#searchtd').toggle();
        $(this).val(function (i, v) {
            return v === 'Hide Search' ? "Show Search" : 'Hide Search';
        })
    });
});

DEMO

Answer 2

    $(function() {
         $('#toggle').click(function() {
                var $currentBtn = $(this);
                $('#searchtd').toggle();
                var newText = $currentBtn.attr('value') === 'Hide Search' ? "Show Search" : 'Hide Search';
                $currentBtn.attr('value', newText)
           });
    });

onclick有2个功能。只有第一个功能有效

2 个答案: