javascript - 多个 slidetoggle div 更改文本

Question

我有这段代码，它显示了一个配置文件 div onclick 并且还更改了被单击元素的文本。有多个这样的例子。

<div class="show" data-target=".open1">View Profile</div>
<div class="info open1">Lorem ipsum</div>

当打开另一个 div 时，先前打开的 div 将关闭。但是，关于此的文本仍然保持为“关闭配置文件”。我想对此进行更改，以便文本也变回原样。

知道我该怎么做吗？

var $bgs = $('.info');
var $show = $('.show');

$($show).click(function () {
    var $target = $($(this).data('target')).stop(true).slideToggle();
    $bgs.not($target).filter(':visible').stop(true, true).slideUp();

    $(this).click(function(){
        $(this).text(function(_, oldText) {
            return oldText === 'Close Profile' ? 'View Profile' : 'Close Profile';

        });

    });
})

Answer 1

请检查:

var $bgs = $('.info');
var $show = $('.show');

$show.click(function () {
    var $target = $($(this).data('target')).stop(true).slideToggle();
    var oldOpened = $bgs.not($target).filter(':visible');
    oldOpened.stop(true, true).slideUp();
    if(oldOpened.length > 0){
      var tempClasses = $(oldOpened).attr("class");
      var oldOpenClass = $.trim(tempClasses.replace("info",""));
      var oldOpenerDiv = $("div[data-target='."+oldOpenClass+"']");
      
      $(oldOpenerDiv).text(function(_, oldText) {
        return oldText === 'Close Profile' ? 'View Profile' : 'Close Profile';

       });
    }
  
   $(this).text(function(_, oldText) {
      return oldText === 'Close Profile' ? 'View Profile' : 'Close Profile';

   });
})

.info{
  display:none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="show" data-target=".open1">View Profile</div>
<div class="info open1">Lorem ipsum 11</div>
<div class="show" data-target=".open2">View Profile</div>
<div class="info open2">Lorem ipsum 22</div>
<div class="show" data-target=".open3">View Profile</div>
<div class="info open3">Lorem ipsum 33</div>