Basculer entre deux classes dans jQuery

Question

J'essaie de modifier les icônes des portlets de l'interface utilisateur jQuery . Plutôt que d'avoir un plus à minimiser et un moins à développer, je voulais les changer.

Je n'ai eu qu'un succès limité avec la première fois que vous avez cliqué sur le signe moins, qui devient un avantage, mais le plus ne revient jamais à un point négatif. Toute aide à ce sujet serait très appréciée.

Voici un exemple de code 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>

Voici ce que j'ai proposé pour 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>

---

MODIFIER : voici le code javascript d'origine du site de démonstration de l'interface utilisateur 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>

Je ne sais pas exactement comment ils ont pu obtenir le plus et le moins pour basculer correctement.

Answer 1

C’est probablement parce que lorsque vous liez ces fonctions, il n’existe aucun résultat pour $ (".portlet-header .ui-icon-plusthick"). Il ne le trouve pas. Vous pouvez ajouter cette liaison à la classe $ (".portlet-header .ui-icon-minusthick"). Click (function () {... après avoir ajouté la classe "ui-icon-plusthick".

EDIT: La solution alternative pourrait être:

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

Le premier clic correspond donc à la première fonction et le second à la deuxième fonction.

Answer 2

Que diriez-vous de

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

Encore plus court

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

MODIFIER

À partir de jQuery 1.7, la méthode .live () est obsolète. Utilisez .on () pour attacher des gestionnaires d’événements. Les utilisateurs d'anciennes versions de jQuery doivent utiliser .delegate () plutôt que .live () .

Référence de l'API jQuery

Answer 3

Vous pouvez essayer le code ci-dessous

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

Answer 4

J'ai écrit cette fonction jQuery, pas un plugin, pour parcourir un nombre quelconque de classes. Deux actes comme une bascule. Il suffit de mettre votre CSV de noms de classe dans les classes de données de l'élément. Puis faites-le passer avec $ (sélecteur) .cycleClass ()

Voir en cours d'utilisation à l'adresse www.PluginExamples.com/draggable choisir draggable-axis .

(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

Au lieu de faire tout ce Javascript, pourquoi ne pas simplement modifier la classe CSS ui-icon-plusthick pour afficher l’image moins au lieu de l’image plus?