javascript - jQuery toggleClass 有效，在点击时添加 .text() 替换会破坏它

Question

全部-

我似乎有一个有趣的问题来解决单击按钮不仅显示/隐藏其下方的 div(因此按钮上的 ID 值)，而且还必须更改按钮内的文本以及从 icon-collapse 到 icon-collapse-top 的合金图标(在此处查看更多信息:http://nickpiesco.github.io/alloy-ui-font-awesome-cheatsheet/)

HTML

<div class="button-holder">
    <button class="btn btn-primary toggle-hidden" id="1">Expand
        Options <span class="icon-collapse"></span></button>
</div>

JS

$(".hidden-group").hide();

$(".toggle-hidden").click(function(e) {
    event.preventDefault();
    var text = $(this).text();

    $(this).text(
        text == "Minimize Options" ? "Expand Options" : "Minimize Options");

    $(this).find("span").toggleClass( "icon-collapse" );
    $(this).find("span").toggleClass( "icon-collapse-top" );

    $("#hidden-" + e.target.id).toggle(250);

});

问题是，如果我注释掉 .text() 替换代码(有效)，.toggleClass() 代码将再次开始工作。使用 .text() 代码，在 Chrome 开发人员工具中进行调查时，文本替换将导致标签消失。切换几次后，它看起来像这样，不包括跨度:

<button class="btn btn-primary toggle-hidden" id="1">Minimize Options</button>

我试过看看我是否可以将跨度添加到文本替换代码中，但那样你只会在按钮中获得实际文本。

有没有办法防止 .text() 替换也删除它后面的跨度(这会导致图像位于此按钮的末尾)？也欢迎提出其他想法或建议。

Answer 1

您可以在替换文本之前保留一份跨度的副本，然后您可以在后面追加它。有点像

$(".toggle-hidden").click(function(e) {
    e.preventDefault();
    var text = $(this).text();
    var $span = $(this).find("span");
    $(this).text(
        text == "Minimize Options" ? "Expand Options" : "Minimize Options");

    $(this).append($span);
    $(this).find("span").toggleClass("icon-collapse");
    $(this).find("span").toggleClass("icon-collapse-top");

    $("#hidden-" + e.target.id).toggle(250);

});