jQuery-切换文本

jQuery - switching text

本文关键字：文本 jQuery-      更新时间：2023-09-26

实际上，我有：

function switch()
{
    if(document.getElementById('mydivid').innerHTML == "Show +")
        document.getElementById('mydivid').innerHTML = "Show -";
    else
        if(document.getElementById('mydivid').innerHTML == "Show -")
            document.getElementById('mydivid').innerHTML = "Show +";
}

但我希望用jQuery来做这件事。我有：

    $(document).ready(function() {
        $("#mydivid").click(function() {
            // if #mydivid is "Show +" do: $("#mydivid").html("Show -");
            // else if #mydiv is "Show -" do: $("#mydivid").html("Show +");
        });
    });

如何使用这些if？或者我可以只使用一个div元素来使用toggler吗？

您可以使用.text()函数以文本形式获取div内容。请尝试以下代码。

演示

$(document).ready(function() {
    $("#mydivid").click(function() {
         if ($(this).text() == 'Show +') {
            $(this).text('Show -');
         } else if ($(this).text() == "Show -") {
            $(this).text('Show +');
         }
    });
});

PS:如果div有white space/newline，请将.text包裹在$.trim()中。

我认为这应该有效。

$(document).ready(function() {
        $("#mydivid").click(function() {
            if ($(this).text() === "Show +")
               $(this).text("Show -");
            else
               $(this).text("Show +");
        });
    });

$(document).ready(function() {
    $("#mydivid").click(function() {
        var that = $(this);
        if(that.text() == 'Show +') that.text('Show -');
        else that.text('Show +');
    });
});

演示

$(document).ready(function() {
    $("#mydivid").click(function() {
        $(this).text(function(i,text) {
            return text === 'Show +' ? 'Show -' : 'Show +';
        });            
    });
});

这里有一种只通过现有文本实现的方法：

$(document).ready(function() {
    $("#mydivid").click(function() {
        $(this).text(function(i, old){
            return "Show "+ ( /'+/.test( old) ) ? '-': '+';
        })
    });
});

我认为这是为了切换一个元素，在这种情况下，切换一个类会是一个更好的解决方案，但不清楚完整的代码会做什么。

相关文章：