Toggle innerHTML

问题

I've seen various examples come close to what I am looking for, but none of it seems to describe it how I exactly want it. I am a beginner to jQuery, so explanations welcome.

I'm looking for this to toggle the innerHTML from - to +. Anyone know of a way to do this, efficiently?

jQuery/JavaScript

$(document).ready(function() {
            $(".A1").click(function() {
                $(".P1").toggle("slow");
                $(".A1").html("+");
            });
        }); 

HTML

<div class="A1">-</div>
<h2 class="H1">Stuff</h2>
<div class="P1">
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
</div>

Thank you, anything relating to switching the inside text of an HTML element shall help. =)

回答1:

How about adding a class that will let you know the expanded/collapsed status?

Html

<div class="A1 expanded">-</div>
<h2 class="H1">Stuff</h2>
<div class="P1">
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
</div>

JavaScript:

$(document).ready(function() {
    $(".A1").click(function() {
        var $this = $(this);
        $(".P1").toggle("slow")

        $this.toggleClass("expanded");

        if ($this.hasClass("expanded")) {
            $this.html("-");
        } else {
            $this.html("+");
        }
    });
});

Example: http://jsfiddle.net/sGxx4/

回答2:

$(document).ready(function() {
    $(".A1").click(function() {
        $(".P1").toggle("slow");
        $(".A1").html(($(".A1").html() === "+" ? $(".A1").html("-") : $(".A1").html("+")));
    });
});

A bit of explanation: I'm setting $("#A1").html() with the product of the tertiary operator, using it to check for the current value of #A1's text. If it's a +, I set the element's text to -, otherwise, I set it to +.

However, you said "efficiently." To this end, it's important to note that if you're going to use a selector twice or more in the same function, you should store the jQuery object that results from the selector you give in a variable, so you don't have to re-run the selector each time. Here's the code with that modification:

$(document).ready(function() {
    $(".A1").click(function() {
        var $A1 = $(".A1");
        $(".P1").toggle("slow");
        $A1.html(($A1.html() === "+" ? $A1.html("-") : $A1.html("+")));
    });
});

回答3:

There's no way to toggle content. You could check if the $('.P1') is visible, then changing the +/- div according to that.

Something like :

$(document).ready(function() {
    $(".A1").click(function() {
     $(".P1").toggle("slow", function(){
       if($(this).is(':visible'))
           $(".A1").html("-")
       else
           $(".A1").html("+")
     });
   });
}); 

Using a callback function (the second argument of the .toggle() method) to do the check will guarantee that you're checking after the animation is complete.

JsFiddle : http://jsfiddle.net/cy8uX/

回答4:

more shorter version

$(document).ready(function() {
    $(".A1").click(function() {
        var $self = $(this);
        $(".P1").toggle("slow", function  (  ) {
            $self.html( $self.html() == "-" ? "+" : "-");
        });
    })
}); 

回答5:

Here's a way that uses class names on a parent and CSS rules and doesn't have to change the HTML content and works off a container and classes so you could have multiple ones of these in the same page with only this one piece of code:

HTML:

<div class="container expanded">
    <div class="A1">
        <span class="minus">-</span>
        <span class="plus">+</span>
    </div>
    <h2 class="H1">Stuff</h2>
    <div class="P1">
    Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
    </div>
</div>​

CSS:

.expanded .plus {display:none;}
.collapsed .minus {display: none;}

Javascript:

$(document).ready(function() {
    $(".A1").click(function() {
        $(this).closest(".container")
            .toggleClass("expanded collapsed")
            .find(".P1").slideToggle("slow");
    });
});

​

Working demo: http://jsfiddle.net/jfriend00/MSV4U/

来源：https://stackoverflow.com/questions/9694346/toggle-innerhtml