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

你可以使用conditional operator ? : conditional operator ? :在文本和切换之间切换。

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

现场演示

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

Answer 2

jsBin演示

$('.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 void或A按钮的任何内容，只需使用事件处理程序event.preventDefault() 。
  
• 要切换文本，您可以使用简单的三元运算符$(this).text()=='more'?'less':'more'

只是为了提醒你关于三元： [statement] ? [if true] : [if false] ; [statement] ? [if true] : [if false] ;