Javascript 单击“更改文本”并将其他更改恢复为默认值？

我有一些类似的文本（“更多关于我们”），我在单击时将其更改为另一个（“更少关于我们”），再次单击时将其更改回。但现在我需要一个解决方案，当我单击一行（例如第一行，只单击一次）然后单击另一行（这次是第二行），第一行（现在显示“关于我们的信息较少”）变回“关于我们的信息较多”，而第二行仍然变为“关于我们的信息较少”

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>

---

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

});

它的作用是：

存储当前单击范围的

文本

将所有跨度更改为“更多关于我们”

将当前文本更改为原始文本

继续使用正常功能

看小提琴：“

编辑：这也可以使用

.sibbines（）

完成，如下所示：

$('.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');

});

说明：这将迭代当前元素的所有同级并重置它们的文本

看小提琴：“

可通过以下方式进一步减少（感谢Ted Nyberg提供的信息）：

---

请参阅代码中的内联注释

//单击时。详细信息
$（'.more'）。在（'click'，function（）上{
//要更新到当前元素的文本
var updateText=$（this.text（）=='More about us'？'Less about us'：'More about us'；
//更新元素的文本
$（this）.text（updateText）；//设置当前元素文本
$（'.more'）.not（this）.text（'more about us'）；//将文本设置为除单击的元素之外的其他元素。
});

更多关于我们




更多关于我们




更多关于我们




更多关于我们




更多关于我们的信息
关于

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

…在设置刚刚单击的文本之前“重置”其他文本

完整的代码如下所示：

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

这更符合干法，因为其他建议答案重复了条件语句。
使用选择器从跨距列表中排除单击的跨距，以下是您需要的代码：


$（'.more'）。单击（函数（）{
var s=$（本）；
s、 html（s.text（）=“更多关于我们”？“更少关于我们”：“更多关于我们”）；
$（'.more'）。不是（$（this））。每个（函数（）{
$（this.html（s.text（）==‘更多关于我们’？‘更少关于我们’：‘更多关于我们’）；
});
});

更多关于我们


更多关于我们


更多关于我们


更多关于我们


更多关于我们的信息这里是小提琴：

试试这个：

var mores = $('span.more'); //cache all once
var more = 'More about us', less = 'Less about us', txt;
mores.on('click', function(e) {
   txt = this.innerHTML; //get old text
   mores.text(more); //reset all
   this.innerHTML = txt.match(more) ? less : more; //match against old text
});


$（函数（）{
var mores=$（'span.more'）；//缓存一次
var more=‘更多关于我们的信息’，
less=‘less about us’，
txt；
更多关于（'click'，函数（e）{
txt=this.innerHTML；//获取旧文本
mores.text（更多）；//全部重置
this.innerHTML=txt.match（更多）？less:more；//与旧文本匹配
});
});
span.more{
边框：1px纯灰；
光标：指针；
填充：5px9px；
显示：内联块；
宽度：110px；
利润底部：3倍；
边界半径：5px；
字体系列：Calibri；
背景：幽灵白；
盒影：0px 1px 1px；
}
更多：悬停{
盒影：0px 1px 2px；
}
span.更多信息：活动{
盒影：0px 1px 1px插页；
}

更多关于我们
更多关于我们
更多关于我们
更多关于我们
更多关于我们的信息
只需添加
$（'.More'）.text（'More about us'）
在单击事件顶部，要在操作前使用“更多关于我们的信息”初始化所有跨度，请参阅。这将删除原始功能。双击元素不会切换它。仍然不正确，总是将文本设置为
更多关于我们的信息
否，仅适用于兄弟姐妹-即其他。单击元素旁边的“更多”元素：我认为重置兄弟姐妹有点不详细？使用$（this.sibles（）.text（“更多关于我们”）；为什么不重新设置这个的兄弟姐妹呢？见答案下落，考虑留下评论！“它工作正常吗？”@TedNyberg是的，也许这是一种方法，但有很多解决方案。一如既往，通往罗马的道路很多那么，否决投票的原因是什么？
$('.more').click(function() {
    var s = $(this);
    s.siblings('.more').text('More about us')
    s.html(s.text() == 'More about us' ? 'Less about us' : 'More about us');
});

$(".more").on("click", function() {
    var s = $(this);

    /*  Just add this line of Code  */
    $(".more").text('More about us');

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

var mores = $('span.more'); //cache all once
var more = 'More about us', less = 'Less about us', txt;
mores.on('click', function(e) {
   txt = this.innerHTML; //get old text
   mores.text(more); //reset all
   this.innerHTML = txt.match(more) ? less : more; //match against old text
});