Question

我在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>

jQuery

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

});

我收到警报文本显示更多。但这并没有改变少显示文字

Answer 1

我不知道对.clone()，.remove()，.end()等的各种调用是用来做什么的，但是您似乎对此进行了过度设计。具体来说，这里发生的事情是您已经成功地在 cloned 元素上设置了文本，但随后从未对该元素执行任何操作。原始元素保持不变。

简化。

只需将要修改的文本包装在其自己的元素中，然后将其定位为：

<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');
});

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

1 个答案: