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

请检查：

＆＃13;

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

＆＃13;

.info{
  display:none;
  }

＆＃13;

<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>

＆＃13;

Answer 2

＆＃13;

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).text(function(_, oldText) {
    return oldText === 'Close Profile' ? 'View Profile' : 'Close Profile';

  });

})

＆＃13;

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

＆＃13;

多个slidetoggle divs更改文本

2 个答案: