代码之家 › 专栏 › 技术社区 › Liam neesan

如何使用JQuery删除并向span标记添加新文本?

jquery

Liam neesan · 技术社区 · 6 年前

span

html代码

<span class="mobsize-showmore-text">
        Show More
        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mobsize-btn-downarrow">
        <i class="material-icons down-icon">keyboard_arrow_down</i>
    </button>
</span>

滑动分页

$(".mobsize-btn-downarrow").click(function () {
    $(".mobsize-div-toggle").slideToggle('fast');
    alert("mobsize-showmore-text = " + $('.mobsize-showmore-text').clone()
                               .children()
                               .remove()
                               .end()
                               .text());

    $('.mobsize-showmore-text').clone()
                               .children()
                               .remove()
                               .end()
                               .text('show less');

});

显示更多 显示较少

1 回复 | 直到 6 年前

David 6 年前

我不知道这些电话 .clone() .remove() , .end() 克隆

简化。

只需将要修改的文本包装到它自己的元素中,并将其作为目标:

<span class="mobsize-showmore-text">
    <span class="showmore-text-content">Show More</span>
    <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mobsize-btn-downarrow">
        <i class="material-icons down-icon">keyboard_arrow_down</i>
    </button>
</span>

$(".mobsize-btn-downarrow").click(function () {
    $(".mobsize-div-toggle").slideToggle('fast');
    $('.mobsize-showmore-text .showmore-text-content').text('Show Less');
});

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

2 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前