仅在html中定义的jQuery切换文本

这已经被回答了很多次，但我的方法不同

我想（通过jQuery）在单击时切换文本。但是我想在html中定义这个文本（因为它是多语言的，并且依赖于langs，在Smarty变量中更精确），所以

$（this）.html（condition？“Some”：“Other”）

不起作用

我的实际做法是：

HTML

<a class="readmore" href="#content">
    <span class="text" rel="Menos">Más</span>
</a>

但是我不太喜欢代码的冗余和

rel

属性的不当使用。我确信有一种更具jquery风格的解决方案

---

感谢阅读。

您可以通过数据方法附加数据。但是，您仍然存在初始状态和相反状态的问题

<a href="#content" data-content="SomeOtherContent">Text</a>

$('a').click(function()
{
     var currentObj = $(this);
     var currentText = currentObj.html();
     currentObj.html(currentObj.data('content'));
     currentObj.data('content', currentText);
});

$（'a'）。单击（函数（）
{
var currentObj=$（此）；
var currentText=currentObj.html（）；
currentObj.html（currentObj.data（'content'））；
currentObj.data（“内容”，currentText）；
});

使用两个跨距怎么样：

<a class="readmore" href="#content">
    <span class="text">Más</span>
    <span class="text" style="display: none;">Menos</span>
</a>

---

这是一个演示，

我实际上很难理解您想要做什么，但是拼凑了一个

我不知道你是不是这个意思，但那是我对这个问题的理解

编辑：

是否具有正确的功能

---

不使用锚定标签。

投票支持JSFIDLE（尽管它不是我想要的，谢谢）啊……我现在明白你的意思了。但我会按照下面布莱恩·费舍尔的思路去做。类似这样的多语言支持。如果你愿意，你甚至可以不使用锚定标签。我将把它写成$（“.readmore”）。单击（函数（事件）{$（'.text'）.toggle（）；返回false；}）；或$（“.readmore”）。单击（函数（事件）{$（'#更多，#更少'）.toggle（）；返回false；}）；要使其“更安全”，您还可以选择单击的对象的子对象。（因此，如果有更多的“.readmore”，它只适用于这一个实例。是的，我同意，我一开始只是想有一个工作示例。但是当我按照您在第一条评论中的建议简化代码时，我还添加了单击元素上的find，以将搜索限制在子体上。这一个很好，但我不喜欢使用两个spans，一个具有内联样式的。谢谢。您不需要使用内联样式。您可以通过向隐藏的span添加类或不添加任何内容并使用.readmore span:last child{display:none；}来使用外部样式表我现在正在测试。数据属性会在旧的浏览器中出现问题吗？数据是jquery，所以它应该是跨浏览器的。效果很好！一个Frédérik Hidis发布了相同的答案，但对问题中的代码更具体，但他删除了它。感谢您的时间。编辑后的答案适用于问题的代码，希望通过。

<a class="readmore" href="#content">
    <span class="text">Más</span>
    <span class="text" style="display: none;">Menos</span>
</a>

$(".readmore").click(function(event) {
    $(this).find('.text').toggle();
    return false;    
 });