如何在漸進式公開腳本中切換文本？

Question

我有一個小的漸進式披露（「文本展開和摺疊」），但切換文本不會更改。這樣的作品:(我沒寫）

$(document).ready(function() { 
    $('div.view').hide(); 
    $('div.slide').toggle(
     function() { 
      $(this).siblings('div.view').fadeIn('slow'); 
     }, 
     function() { 
      $(this).siblings('div.view').fadeOut('fast'); 
      return false; 
     } 
    ); 
}); 

我想將「more ...」文本切換字符串動態地更改爲「less ...」。

Answer 1

可以使用.text()這樣做：

$(document).ready(function() { 
    $('div.view').hide(); 
    $('div.slide').toggle(
     function() { 
      $(this).text('less...').siblings('div.view').fadeIn('slow'); 
     }, 
     function() { 
      $(this).text('more...').siblings('div.view').fadeOut('fast'); 
     } 
    ); 
}); 

很重要this在切換，否則你正在改變文本所有的
<div class="slide">元素，而不只是你正在處理的那個。

Answer 2

我想我明白你想要做什麼。請讓我知道如果我不是，我會相應地更新我的答案。

這是我很簡單的標記......

<div class="slide">more...</div> 
<div class="view"> 
<span>This is some stuff!</span> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

和腳本...

$(document).ready(function() { 
    $('div.view').hide(); 
    $('div.slide').toggle(
     function() { 
      $(this).siblings('div.view').fadeIn('slow'); 
      $(this).text("less..."); //change the inner text of the DIV 
     }, 
     function() { 
      $(this).siblings('div.view').fadeOut('fast'); 
      $(this).text("more..."); //change the inner text of the DIV 
      return false; 
     } 
    ); 
});​ 

這將盡快div點擊更改DIV文本。

如果你想等到隱藏DIV顯示更改文本，使用這個腳本：

$(document).ready(function() { 
    $('div.view').hide(); 
    $('div.slide').toggle(
     function() { 
       $(this).siblings('div.view').fadeIn('slow', 
        function() { 
        $("div.slide").text("less...") //change the inner text after the animation is complete 
        }); 
     }, 
     function() { 
      $(this).siblings('div.view').fadeOut('fast', 
        function() {               
         $("div.slide").text("more..."); //change the inner text after the animation is complete 
        }); 
      return false; 
     } 
    ); 
});​