更改按钮文本

Question

我发现我的答案上的一部分：jQuery change button text

改变对点击按钮的文字。我正在寻找的是如何切换该文本。我尝试使用类方法切换“show 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> 

或因为您测试的存在，而不使用.text()

的.val()方法（适用于输入元件）现在的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/