Question

更改点击按钮的文字。我正在寻找的是如何切换该文本。我尝试使用类方法来切换“show teams”/“hide teams”的文本。如果我只使用该属性，我可以更改按钮单击上的文本，但不会更改它。

HTML

<input class="teams" type="button" value="Teams" />

JS

    $(".teams").click(function () {
        $("#container2").toggle();
        //$("#teams").prop("value", "Hide Teams");

        var $this = $(this);
        if ($this.hasClass('teams')) {
            $this.text('Show Teams');
        } else {
            $this.text('Hide Teams');
        }
    });

Answer 1

input个元素没有文字内容

引用jQuery docs

获取匹配元素集合中每个元素的组合文本内容，包括它们的后代。

使用button代码

<button class="teams">Teams</button>

或使用.val()方法（适用于输入元素的）代替.text()

现在，既然你测试了teams类的存在，你还需要切换它

    var $this = $(this);
    if ($this.hasClass('teams')) {
        $this.text('Show Teams');
    } else {
        $this.text('Hide Teams');
    }
    $this.toggleClass('teams'); // add this line

Answer 2

    $(".teams").click(function () {
        $("#container2").toggle();
        //$("#teams").prop("value", "Hide Teams");

        var $this = $(this);
        if ($this.val() === 'Show Teams') {
            $this.val('Hide Teams');
        } else {
            $this.val('Show Teams');
        }
    });

Answer 3

您需要将属性value设置为您的文字：$this.attr('value', 'Show Teams');

<强>的jsfiddle：

http://jsfiddle.net/qMrbn/

更改按钮文字

3 个答案: