Question

我有一个切换按钮，我正在添加到iFrame：

<script>
    $('#list div').each(function(){
        $(this).append('<span class="togglebutton">Maximize</span>');   
    });

    $("span.togglebutton").click(function() {
        $(this).closest("li").children("div").toggleClass("maximized");
    });
</script>

当toggleClass最大化时，如何更改文本最大化/最小化之间的切换？

Answer 1

$("span.togglebutton").click(function() {
    var $this = $(this);  // cache jquerized 'this'
    $this.closest("li").children("div").toggleClass("maximized");

    var currentText = $this.text();

    // if the text is currently "Maximize"
    if (currentText === "Maximize") {
        // change it to new value
        $this.text("New Text");
    }
    else {
        // change it back to "Maximize"
        $this.text("Maximize");
    }
});

Answer 2

好吧，如果您正在寻找像toogleClass()这样的功能来为您完成这项工作，那么您就不走运了。 AFAIK，您必须手动完成。

做这样的事情

function toggleText() {
    var curText = $("span.togglebutton").text();
    var newText;
    if(curText=="Maximize") { newText = "Minimize"; }
    else { newText = "Maximize"; }
    $("span.togglebutton").text(newText);
}

现在你可以快乐地调用它来切换它。像

    $("span.togglebutton").click(function() {
        $(this).closest("li").children("div").toggleClass("maximized");
        toggleText();
    });

Answer 3

$(this).text('New Text');

OR

$(this).val('New Text');

确定状态。

if ($this.text() == 'Maximized') {
    $(this).text('Minimized');
} else {
    $(this).text('Maximized');
}

Answer 4

$("span.togglebutton").toggle(function() {
    $(this).closest("li").children("div").addClass("maximized")
    $(this).text("Maximized Text");
},function(){
    $(this).closest("li").children("div").removeClass("maximized")
    $(this).text("Minimized Text");
});

如何更改<span>元素的文本？</span>

4 个答案: