Umschalten zwischen zwei Klassen in jQuery

Question

Ich versuche, die Symbole für die jQuery UI-Portlets . Anstatt ein Plus hat zu minimieren und ein Minus zu erweitern, wollte ich sie wechseln.

Ich hatte nur begrenzten Erfolg mit ihm, wo das ersten Mal das Minus es zu einem Plus Flips klicken, aber das Plus klappt nie zu einem Minus. Jede mögliche Hilfe auf diesem würde sehr geschätzt werden.

Hier ist ein Beispiel HTML:

<script src="scripts/jquery-1.3.2.js" type="text/javascript" ></script>
<script src="scripts/ui/ui.core.js" type="text/javascript"></script>
<script src="scripts/ui/ui.sortable.js" type="text/javascript"></script>

<div class="column">
    <div class="portlet">
        <div class="portlet-header">Links</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
</div>

Hier ist, was ich mit der jQuery kam:

<script type="text/javascript">
    $(function() {
        $(".column").sortable({
            connectWith: '.column'
        });

        $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
        .find(".portlet-header")
            .addClass("ui-widget-header ui-corner-all")
            .prepend('<span class="ui-icon ui-icon-minusthick"></span>')
            .prepend('<span class="ui-icon ui-icon-closethick"></span>')
            .end()
        .find(".portlet-content");

        $(".portlet-header .ui-icon-minusthick").click(function() {
            $(this).removeClass("ui-icon-minusthick");
            $(this).addClass("ui-icon-plusthick");
            $(this).parents(".portlet:first").find(".portlet-content").toggle();
        });

        $(".portlet-header .ui-icon-plusthick").click(function() {
            $(this).removeClass("ui-icon-plusthick");
            $(this).addClass("ui-icon-minusthick");
            $(this).parents(".portlet:first").find(".portlet-content").toggle();
        });

        $(".portlet-header .ui-icon-closethick").click(function() {
            $(this).parents(".portlet:first").toggle();
        });

        $(".column").disableSelection();
    });
</script>

---

Bearbeiten : Hier ist das Original Javascript aus der jQuery UI Demo-Seite:

<script type="text/javascript">
$(function() {
    $(".column").sortable({
        connectWith: '.column'
    });

    $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
        .find(".portlet-header")
            .addClass("ui-widget-header ui-corner-all")
            .prepend('<span class="ui-icon ui-icon-plusthick"></span>')
            .end()
        .find(".portlet-content");

    $(".portlet-header .ui-icon").click(function() {
        $(this).toggleClass("ui-icon-minusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });

    $(".column").disableSelection();
});
</script>

Ich bin mir nicht ganz sicher, wie sie in der Lage waren richtig das Plus- und Minus hin- und herzuschalten zu erhalten.

Answer 1

Es wahrscheinlich, weil, wenn Sie diese Funktionen binden es gibt keine Treffer für $ ( "Portlet-Header .ui-icon-plusthick"). Es macht es nicht finden. Sie können dies in dem $ Bindung ( "Portlet-Header .ui-icon-minusthick"). Klicken (function () {... nach "ui-icon-plusthick" Klasse hinzufügen.

EDIT: Alternativlösung könnte sein:

$(".portlet-header .ui-icon-minusthick").toggle(function() {
        $(this).removeClass("ui-icon-minusthick");
        $(this).addClass("ui-icon-plusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    }, function() {
        $(this).removeClass("ui-icon-plusthick");
        $(this).addClass("ui-icon-minusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });

So erster Klick würde erste Funktion und zweiten Klick sein würde zweite Funktion.

Answer 2

Wie wäre es

$(YOUR_ELEMENT).live("EVENT_NAME", function() {
    $(".portlet-header").toggleClass("ui-icon-plus").toggleClass("ui-icon-minus");
});

Noch kürzer

$(YOUR_ELEMENT).live("EVENT_NAME", function() {
    $(".portlet-header").toggleClass("ui-icon-plus ui-icon-minus");
});

Bearbeiten

Wie von jQuery 1.7 wird die .live() Methode veraltet. Verwenden Sie .on() an Event-Handler anhängen. Benutzer älterer Versionen von jQuery sollten .delegate() in Vorzug .live() verwenden.

---

jQuery API-Referenz

Answer 3

Sie können den Code unten versuchen

$(this).toggleClass('ui-icon-plusthick ui-icon-minusthick');

Answer 4

Ich schrieb diese jQuery-Funktion, nicht ein Plugin, um durch eine beliebige Anzahl von Klassen. Zwei wirkt wie ein Schalter. Legen Sie einfach Ihre CSV von Klassennamen in dem Daten-Klassen des Elements. Dann Zyklus mit $ (Selektor) .cycleClass ()

Sehen Sie es im Einsatz bei www.PluginExamples.com/draggable wählen ziehbar-Achse .

(function($){
    $.fn.cycleClass = function(){
        if( !$(this).data("aClasses") ){
            var classes = $(this).attr("data-classes").split(",");
            $(this).data("aClasses", classes);
            $(this).data("classes", classes.join(" "));
            $(this).data("class", classes.length);
        }
        $(this).data("class",($(this).data("class")+1) % $(this).data("aClasses").length);
        $(this).removeClass($(this).data("classes"))
            .addClass( $(this).data("aClasses")[$(this).data("class")] );
        return $(this);
    }
});

Answer 5

Statt alle zu tun, die Javascript, warum Sie nicht einfach ändern Sie die ui-icon-plusthick CSS-Klasse auf das Minus Bild anstelle des Plus-Bild zu zeigen?