Alternar entre dos clases en jQuery

Question

Estoy tratando de modificar los iconos de los portlets de jQuery UI . En lugar de tener un plus para minimizar y un menos para expandir, quería cambiarlos.

Solo he tenido un éxito limitado cuando la primera vez que hago clic en el signo negativo cambia a un signo positivo, pero el signo positivo nunca cambia a un signo negativo. Cualquier ayuda en esto sería muy apreciada.

Aquí hay un ejemplo de 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>

Esto es lo que se me ocurrió para 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>

---

EDITAR : Aquí está el javascript original del sitio de demostración de jQuery UI:

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

No estoy exactamente seguro de cómo pudieron obtener el más y el menos para alternar correctamente.

Answer 1

Probablemente porque al vincular esas funciones no hay resultados para $ (" .portlet-header .ui-icon-plusthick "). No lo encuentra. Puede agregar este enlace a $ (" .portlet-header .ui-icon-minusthick "). Haga clic en (function () {... después de agregar la clase " ui-icon-plusthick "

EDITAR: La solución alternativa podría ser:

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

Entonces, el primer clic sería la primera función y el segundo clic sería la segunda función.

Answer 2

¿Qué tal

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

Aún más corto

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

EDIT

A partir de jQuery 1.7, el método .live () está en desuso. Use .on () para adjuntar controladores de eventos. Los usuarios de versiones anteriores de jQuery deben usar .delegate () en lugar de .live () .

---

jQuery API reference

Answer 3

Puedes probar el siguiente código

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

Answer 4

Escribí esta función jQuery, no un complemento, para recorrer cualquier número de clases. Dos actos como una palanca. Simplemente coloque su CSV de nombres de clase en las clases de datos del elemento. Luego cicle con $ (selector) .cycleClass ()

Véalo en uso en www.PluginExamples.com/draggable elija eje arrastrable .

(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

En lugar de hacer todo ese Javascript, ¿por qué no simplemente modifica la clase CSS ui-icon-plusthick para mostrar la imagen negativa en lugar de la imagen positiva?