1

你好朋友，我是新手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

请帮助我的朋友提前谢谢... :))

4

2 回答 2

2

您可以使用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");   
})​
于 2012-12-23T08:06:33.453 回答
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] ;

于 2012-12-23T08:11:26.567 回答