Question

实际上，我有：

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吗？

Answer 1

您可以使用.text()函数将div内容作为文本。请尝试以下代码。

DEMO

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

PS：如果div为.text，请将$.trim()包裹在white space/newline内。

Answer 2

$(document).ready(function() {
    $("#mydivid").click(function() {
        var that = $(this);

        if(that.text() == 'Show +') that.text('Show -');
        else that.text('Show +');
    });
});

Answer 3

我认为这应该有用。

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

Answer 4

以下是仅通过现有文本执行此操作的方法：

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

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

Answer 5

Demo

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

jQuery - 切换文本

5 个答案: