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

Question

我有一些类似的文字(“关于我们的更多信息”)，我已将其更改为另一个(“关于我们的信息更少”)，当单击并再次单击时更改回来。但是现在我需要一个解决方案，当我点击一个(例如第一行，一次)然后点击另一个(这次是第二行)时，第一行(现在显示“Less about us”)变回“More about us” ”，而第二行仍更改为“关于我们的内容较少”。

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');
});

This is the demo

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. 存储当前点击范围的文本。
2. 将所有跨度更改为“更多关于我们”。
3. 将当前文本更改为原始文本。
4. 继续使用正常功能。

参见 fiddle :“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');

});

说明:这将遍历当前元素的所有兄弟元素并重置它们的文本。

参见 fiddle :“http://jsfiddle.net/ee24gcdj/1/”

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

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