javascript - 无法切换文本

Question

[Fiddle]

在示例中，我尝试通过匹配数据属性使每对按钮切换文本。我可以将文本从“添加”更改为“单击时删除”。但我无法在第二次单击时将其切换回“添加”。谁能告诉我出了什么问题？

HTML:

<div class="yellow"><button class="my_choice" data-term="A">Remove</button>
<button class="my_choice" data-term="A">Remove</button>
</div>
<div class="black">
<button class="my_choice" data-term="B">Add</button>

<button class="my_choice" data-term="B">Add</button>
</div>

jQuery:

$('.my_choice').click(function(){
      var dataterm = $(this).data('term'),
          my_choice = $('.my_choice[data-term='+dataterm+']')
      if (my_choice.text() == "Remove")
      {
          my_choice.text("Add")
      }
      else
      {
          my_choice.text("Remove")
      }

});

Answer 1

只需更改条件以引用单击的项目，而不是所有匹配的按钮

if (my_choice.text() == "Remove")

至:

if ($(this).text() == "Remove") 

FIDDLE

正如您所看到的，您正在尝试从多个按钮读取 text() ，这就是它不起作用的原因。您需要限制 text() 仅从一个按钮读取。

编辑:

更新了我的答案以引用 fiddle 。