Passa da una classe all'altra in jQuery

Question

Sto cercando di modificare le icone per i portlet UI jQuery . Invece di avere un vantaggio da minimizzare e un aspetto negativo da espandere, volevo cambiarli.

Ho avuto un successo limitato solo quando la prima volta che si fa clic sul segno negativo passa a un valore positivo, ma il valore positivo non passa mai a un punto negativo. Qualsiasi aiuto su questo sarebbe molto apprezzato.

Ecco un esempio 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>

Ecco cosa mi è venuto in mente per il jQuery:

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

---

MODIFICA : ecco il javascript originale dal sito demo dell'interfaccia utente jQuery:

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

Non sono esattamente sicuro di come siano stati in grado di ottenere il più e il meno per attivare correttamente.

Answer 1

Probabilmente perché quando si associano tali funzioni non ci sono risultati per $ (" .portlet-header .ui-icon-plusthick "). Non lo trova. Puoi aggiungere questa associazione a $ (" .portlet-header .ui-icon-minusthick "). Fai clic su (function () {... dopo aver aggiunto " ui-icon-plusthick " class.

EDIT: La soluzione alternativa potrebbe essere:

$(".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();
    });

Quindi il primo clic sarebbe la prima funzione e il secondo clic sarebbe la seconda funzione.

Answer 2

Che ne dici

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

Ancora più breve

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

Modifica

A partire da jQuery 1.7, il metodo .live () è obsoleto. Utilizzare .on () per collegare i gestori di eventi. Gli utenti di versioni precedenti di jQuery dovrebbero utilizzare .delegate () preferendo .live () .

---

riferimento jQuery API

Answer 3

Puoi provare il codice qui sotto

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

Answer 4

Ho scritto questa funzione jQuery, non un plugin, per scorrere un numero qualsiasi di classi. Due atti come un interruttore. Inserisci il tuo CSV di nomi di classe nelle classi di dati dell'elemento. Quindi esegui il ciclo con $ (selettore) .cycleClass ()

Guardalo in uso su www.PluginExamples.com/draggable scegli asse trascinabile .

(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

Invece di fare tutto quel Javascript, perché non modifichi semplicemente la classe CSS ui-icon-plusthick per mostrare l'immagine meno anziché l'immagine più?