使用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"); 
})​