多個slidetoggle div更改文本

Question

我有這段代碼，它揭示了一個配置文件div onclick，還更改了clicked元素的文本。 有多個實例。

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

Answer 2

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

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