Question

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

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()限制为仅从一个按钮读取。

编辑：

更新了我的答案以引用小提琴。

Answer 2

您正在使用类选择器获取文本，因此其返回的文本包含类 my_choice 的所有元素，在本例中为 addadd 而不是添加并删除案例删除而不是删除，因此请使用$(this).text()获取当前点击的一个文字。

所以你必须这样做：

$('.my_choice').click(function(){
    var text= $(this).text();
      var dataterm = $(this).data('term'),

          my_choice = $('.my_choice[data-term='+dataterm+']')
      console.log(my_choice.text())
      if (text == "Remove")
      {
          my_choice.text("Add")
      }
      else
      {
          my_choice.text("Remove")
      }

});

FIDDLE DEMO

Answer 3

Demo

正如我之前指出的，您的代码总是输入其他案例

$('.my_choice').click(function(){
      var dataterm = $(this).data('term'),


      if ($(this).text() === "Remove")//change only applied in your code and added some semi colon 
      {
          my_choice.text("Add");

      }
      else
      {
          my_choice.text("Remove");
      }

});

无法切换文字

3 个答案: