更改文本onclick并将其他更改恢复为默认值？

Question

我有一些类似的文字("更多关于我们"),当我再次点击时点击并更改后,我已将其更改为另一个("减去我们").但现在我需要一个解决方案,当我点击一个(例如第一行,只有一次),然后点击另一个(这次是第二行),第一行(现在显示"少关于我们")改回"更多关于我们"虽然第二行仍然改为"少关于我们".

HTML

<span class="more">More about us</span><br/><br/>
<span class="more">More about us</span><br/><br/>
<span class="more">More about us</span><br/><br/>
<span class="more">More about us</span><br/><br/>
<span class="more">More about us</span>

JS

$('.more').click(function() {
    var s = $(this);
    s.html(s.text() == 'More about us' ? 'Less about us' : 'More about us');
});

这是演示

Answer 1

将您的Javascript更改为:

$('.more').click(function() {
    var s = $(this);
    var originaltext= s.text();
    $('.more').text('More about us');  
      s.text(originaltext);
    s.html(s.text() == 'More about us' ? 'Less about us' : 'More about us');

});

它做了什么:

1. 存储text当前单击的跨度.
2. 将所有跨度更改为"关于我们的更多信息".
3. 将当前文本更改为原始文本.
4. 继续正常功能.

看小提琴:" http://jsfiddle.net/HFcvH/35/ "

编辑:这也可以使用.siblings()如下完成:

$('.more').click(function() {
    var s = $(this);

    $(this).siblings().each(function() {
        $(this).text('More about us');  
    });

    s.html(s.text() == 'More about us' ? 'Less about us' : 'More about us');

});

说明:这将遍历当前元素的所有兄弟节点并重置其文本.

看小提琴:" http://jsfiddle.net/ee24gcdj/1/ "

它可以进一步减少使用(感谢Ted Nyberg提供的信息):

$(this).siblings().text('More about us')