Переключение между двумя классами в jQuery

Question

Я пытаюсь изменить значки для портлетов jQuery UI . Вместо того, чтобы иметь плюс, чтобы минимизировать, и минус, чтобы расширить, я хотел переключить их.

У меня был только ограниченный успех с ним, когда первый раз, когда он щелкает минус, он переворачивается на плюс, но плюс никогда не переходит на минус. Любая помощь по этому вопросу будет высоко ценится.

Вот пример 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>

Вот что я придумал для 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>

<ч /> РЕДАКТИРОВАТЬ : вот оригинальный код javascript с демонстрационного сайта 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>

Я не совсем уверен, как им удалось получить плюс и минус для правильного переключения.

Answer 1

Как насчет

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

Еще короче

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

EDIT

Начиная с jQuery 1.7, метод .live() устарел. Используйте .on() для присоединения обработчиков событий. Пользователи старых версий jQuery должны использовать .delegate() вместо .live().

---

Справочник по jQuery API

Answer 2

Вы можете попробовать следующий код

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

Answer 3

Это, вероятно, потому что, когда вы связываете эти функции, нет результатов для $ (". Portlet-header .ui-icon-plusthick"). Это не находит это. Вы можете добавить эту привязку к $ (". Portlet-header .ui-icon-minusthick"). Click (function () {... после добавления класса "ui-icon-plusthick".

EDIT: Альтернативное решение может быть:

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

Таким образом, первый щелчок будет первой функцией, а второй щелчок будет второй функцией.

Answer 4

Я написал эту функцию jQuery, а не плагин, для циклического перебора любого количества классов. Два действует как тумблер. Просто поместите ваш CSV из имен классов в классы данных элемента. Затем переключите его с помощью $ (селектор) .cycleClass ()

См. Это в использовании в www.PluginExamples.com / draggable выберите 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

Вместо того, чтобы делать весь этот Javascript, почему бы вам просто не изменить класс CSS ui-icon-plusthick , чтобы он отображал минус, а не плюс?