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 ? :在文本和切换之间切换。

$(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");   
})

Answer 2

的 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>

您的A按钮不需要内联JS无效或任何内容，只需使用事件处理程序event.preventDefault()。

要切换文字，您可以使用简单的三元运算符$(this).text()=='more'?'less':'more'

提醒您关于三元：[statement] ? [if true] : [if false] ;

使用jQuery单击事件

2 个答案: