使用jQuery點擊事件

Question

你好朋友，我是jQuery上的新朋友，並試圖做出切換效果。我的代碼工作正常，但我也想在其切換文本請檢查下面的代碼

腳本

$('.read_more_list').click(function() { 
    $(".design_list").slideToggle(); 
    if ($(this).children('a').html() == 'more') { 
     $(this).children('a').html('less'); 
    } 
    if ($(this).children('a').html() == 'less') { 
     $(this).children('a').html('more'); 
    } 
})​ 

HTML

<ul class="design_list" style="display: none;"> 
      <li><a href="#">eCommerce</a></li> 
      <li><a href="#">Display Creatives</a></li> 
      <li><a href="#">Logo Design Services</a></li> 
      <li><a href="#">Microsites</a></li> 
      </ul> 
<div class="read_more_list"><a href="javascript:void(0);">more</a></div> 

我要上more當用戶點擊那麼它會轉換成less，當用戶再次點擊它時，它會變成more

請幫我謝謝朋友提前... :)）

Answer 1

jsBin demo

$('.read_more_list a').click(function(e){ 
    e.preventDefault(); 

    $(".design_list").slideToggle(); 
    $(this).text($(this).text()=='more'?'less':'more'); 

}); 

HTML：

<a href="#">more</a> 

• 你不需要內聯JS無效或任何對你的A按鈕，只需使用事件處理程序event.preventDefault()。
  
• 要切換你的文字，你可以用一個簡單的三元操作符$(this).text()=='more'?'less':'more'

只是提醒你關於三元：[statement] ? [if true] : [if false] ;

Answer 2

您可以使用conditional operator ? :與切換沿文本之間進行切換。

$(this).text($(this).text() == "more" ? "less" : "more"); 

Live Demo

$('.read_more_list').click(function() { 
    $(".design_list").slideToggle(); 
    $('a', this).text($(this).text() == "more" ? "less" : "more"); 
})​