Javascript 使用jquery交换文本，如何将其他文本还原为原始文本？

所以我有一点jquery，我用它来交换“查看Bio”和“隐藏Bio”，反之亦然，用于多个配置文件。效果很好，只是我不知道如何使它，当你点击一个不同的配置文件的“查看生物”而其中一个的“隐藏生物”处于活动状态时，另一个配置文件的“隐藏生物”恢复到原来的“查看生物”

基本上，我只想有一个说“隐藏生物”在任何时候（使其成为唯一的活动生物）。 我还想要它，这样我仍然可以点击当前显示“隐藏Bio”的那个，使其显示“查看Bio”（即所有配置文件都显示“查看Bio”）

这是一把小提琴：

（编辑-更新了fiddle，实现了解决方案：）

js:

html:

---

谢谢你的帮助

在将单击的链接更改为“隐藏Bio”之前，您可以选择并将所有链接设置为“查看Bio”

---

你可以做的是选择所有链接并设置为“查看Bio”，然后将单击的链接更改为“隐藏Bio”

---

您可以使用css和单独的文本元素“hide”和“view”来实现这一点

HTML

然后只需选择所有活动的viewbio并删除活动类，然后将活动类添加到单击的视图中

$(".viewbio").click(function(){
    var wasActive = $(this).hasClass("active");
    $(".viewbio.active").removeClass("active");
    if(!wasActive) $(this).addClass("active");
})

---

您可以使用css和文本“隐藏”和“查看”的单独元素来完成此操作

HTML

然后只需选择所有活动的viewbio并删除活动类，然后将活动类添加到单击的视图中

$(".viewbio").click(function(){
    var wasActive = $(this).hasClass("active");
    $(".viewbio.active").removeClass("active");
    if(!wasActive) $(this).addClass("active");
})

---

这将选择具有“隐藏BIO”的项目，并更改这些项目以及您单击的项目

    $(document).ready(function () {
       $(".viewbio").click(function() {
            var $self = $(this);
           if ($self.text().trim() == "VIEW BIO"){
               $(".viewbio:contains('HIDE BIO')").text("VIEW BIO");
               $self.text("HIDE BIO");
           }
           else{
               $self.text("VIEW BIO");

           }
        });
    });

---

这将选择具有“隐藏BIO”的项目，并更改这些项目以及您单击的项目

    $(document).ready(function () {
       $(".viewbio").click(function() {
            var $self = $(this);
           if ($self.text().trim() == "VIEW BIO"){
               $(".viewbio:contains('HIDE BIO')").text("VIEW BIO");
               $self.text("HIDE BIO");
           }
           else{
               $self.text("VIEW BIO");

           }
        });
    });

---

---

完美的但是，有一件事，我能做些什么，这样我仍然可以点击显示“隐藏Bio”的那个，使其显示“查看Bio”（即所有配置文件都显示“查看Bio”）？啊，那么你所要做的就是重新介绍你的if语句。我会为你编辑的。对不起，本，我应该特别提到这一点，我会为未来的观众编辑我的q。谢谢您的解决方案与KJ的有什么不同？它们都做同样的事情，只是想知道其中一个的结构是否比另一个好，或者只是结构不同而已。我想说，我的结构不那么复杂，效率更高，因为它不使用额外的选择器，也不需要else语句。不管怎样都行！完美的但是，有一件事，我能做些什么，这样我仍然可以点击显示“隐藏Bio”的那个，使其显示“查看Bio”（即所有配置文件都显示“查看Bio”）？啊，那么你所要做的就是重新介绍你的if语句。我会为你编辑的。对不起，本，我应该特别提到这一点，我会为未来的观众编辑我的q。谢谢您的解决方案与KJ的有什么不同？它们都做同样的事情，只是想知道其中一个的结构是否比另一个好，或者只是结构不同而已。我想说，我的结构不那么复杂，效率更高，因为它不使用额外的选择器，也不需要else语句。不管怎样都行！很好，这也很好，尽管在我的例子中Ben的更容易实现。仍然是我向Ben提到的同一个问题，即单击“隐藏Bio”并使其看到“查看Bio”（使所有配置文件都显示“查看Bio”）的功能已经被修改为可以做到这一点，而且这不会在javascript中硬编码文本。这样你就可以将viewbio元素的文本更改为任何内容，而不必关心返回js来更改它。谢谢很好的一点，在这种情况下，这并不重要，但这是一个很好的信息，以供将来使用。这也是一个很好的答案，我也不喜欢硬编码值。很好，这也很好，尽管在我的例子中，Ben的更容易实现。仍然是我向Ben提到的同一个问题，即单击“隐藏Bio”并使其看到“查看Bio”（使所有配置文件都显示“查看Bio”）的功能已经被修改为可以做到这一点，而且这不会在javascript中硬编码文本。这样你就可以将viewbio元素的文本更改为任何内容，而不必关心返回js来更改它。谢谢很好的一点，在这种情况下，这并不重要，但这是一个很好的信息，以备将来使用。这也是一个很好的答案，我也不喜欢硬编码值。

<div class="viewbio">
   <span class="view">View</span>
   <span class="hide">Hide</span> 
   Bio
</div>

.viewbio .hide, .viewbio.active .view {
   display:none;
}

.viewbio.active .hide {
   display: inline;
}

$(".viewbio").click(function(){
    var wasActive = $(this).hasClass("active");
    $(".viewbio.active").removeClass("active");
    if(!wasActive) $(this).addClass("active");
})

    $(document).ready(function () {
       $(".viewbio").click(function() {
            var $self = $(this);
           if ($self.text().trim() == "VIEW BIO"){
               $(".viewbio:contains('HIDE BIO')").text("VIEW BIO");
               $self.text("HIDE BIO");
           }
           else{
               $self.text("VIEW BIO");

           }
        });
    });