如何在一个 jQuery 调用中在两个文本之间切换？

Posted 2023-03-05

【中文标题】如何在一个 jQuery 调用中在两个文本之间切换？

【英文标题】：How do you switch between two texts in one jQuery call?

【发布时间】：2011-07-31 08:06:46

【问题描述】：

假设您有一个.click() 电话。您可以在 .click() 调用中编写什么代码，以便每次单击所选元素时，都可以更改两个字符串之间的文本。我假设.toggle() 和.text() 会在这里发挥作用......

【问题讨论】：

哪两个字符串？什么是文本？

我认为实际的字符串是什么并不重要......

哦，没关系..我才明白你的意思。

【参考方案1】：

尝试以下方法：

$element.bind('click', function() 
    $(this).html($(this).html() == 'string1' ? 'string2' : 'string1');
);

---

编辑 - 2020-01-28

请注意，bind() 现在已弃用。从 jQuery 1.7+ 开始，您应该改用 on()：

$element.on('click', function() 
  $(this).text((i, t) => t == 'string1' ? 'string2' : 'string1');
);

【讨论】：

+1 - 与接受的答案不同，无论文本的初始状态如何，此方法都可以工作。

【参考方案2】：

假设你的 clickableElement 是一个按钮，并且你想切换按钮的文本/标签：

$('#clickableElement').click(function() 
    var originalValue = $(this).val();
    $(this).val(originalValue == 'string1' ? 'string2' : 'string1');
);

【参考方案3】：

$('#togglep').on('click', function()
  $(this).text(function(st1,st2)
    if (st2=='MARKO')return 'POLO';
    return 'MARKO'
  )
)

【讨论】：

虽然此代码可以解决问题，including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的答案添加解释并说明适用的限制和假设。 From Review

【参考方案4】：

试试这个：

$('#someElement').toggle(function()
   $(this).text('text1');
  , 
 function()
   $(this).text('text2');
 
);

【讨论】：

如您在此处看到的，切换事件可能需要多个处理程序api.jquery.com/toggle-event

这在 jquery 1.8 中被弃用并在 1.9 中被删除。

这不应该像@vroo所说的那样使用。

@hoopyfrood 的回答更好