jQuery toggleClass工作，添加.text()替代点击打破它

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

本文关键字：工作 toggleClass 添加 text jQuery      更新时间：2023-09-26

All -

我似乎有一个有趣的问题，在解决一个需求，点击一个按钮不仅显示/隐藏它下面的div(因此在按钮上的ID值)，但也必须改变按钮内的文本以及合金图标从图标崩溃到图标崩溃顶部(见更多在这里:http://nickpiesco.github.io/alloy-ui-font-awesome-cheatsheet/)

<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开发人员工具中进行调查时，文本替换将导致标签消失。切换几次后，它看起来像这样，不包含span:

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

我试着看看是否可以将span添加到文本替换代码中，但这样你就只能在按钮中获得实际的文本。

是否有一种方法来防止。text()替换从删除跨度之后，以及(这导致图像是在这个按钮的结束)?其他的想法或建议也欢迎。

您可以在替换文本之前保留span的副本，然后您可以稍后添加它。比如

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

您可以这样选择按钮的文本$(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>

相关文章：