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

Question

全部-

我似乎有一个有趣的问题来解决这样一个要求，即单击按钮不仅 shows/hides 下方的 div（因此按钮上的 ID 值），而且还必须更改按钮内的文本以及从 icon-collapse 到 icon-collapse-top 的 Alloy 图标（在此处查看更多信息：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>

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

有没有办法防止 .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);

});

Answer 2

您可以这样 select 按钮的文本 $(this).contents().first()[0].textContent。

 


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

$(".toggle-hidden").click(function(e) {
    event.preventDefault();
    var text = $(this).contents().first()[0].textContent;

    $(this).contents().first()[0].textContent =
        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);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="button-holder">
    <button class="btn btn-primary toggle-hidden" id="1">Expand
        Options <span class="icon-collapse"> *Span content*</span></button>
</div>

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

jQuery toggleClass works, adding .text() replacement on click breaks it

html

javascript

css

jquery

alloy-ui