Переключение между двумя классами в jQuery
Вопрос
Я пытаюсь изменить значки для Портлеты пользовательского интерфейса jQuery.Вместо того, чтобы иметь плюс для минимизации и минус для расширения, я хотел поменять их местами.
У меня был лишь ограниченный успех, когда при первом нажатии на минус он переключался на плюс, но плюс никогда не переключался на минус.Любая помощь в этом вопросе будет очень признательна.
Вот пример 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>
Я не совсем понимаю, как им удалось правильно переключать плюс и минус.
Решение
Вероятно, это потому, что при привязке этих функций для $(".portlet-header .ui-icon-plusthick") нет результатов.Оно не находит его.Вы можете добавить эту привязку в $(".portlet-header .ui-icon-minusthick").click(function() { ...после добавления класса «ui-icon-plusthick».
РЕДАКТИРОВАТЬ:Альтернативное решение может быть:
$(".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();
});
Таким образом, первый щелчок будет первой функцией, а второй щелчок будет второй функцией.
Другие советы
Как насчет
$(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");
});
РЕДАКТИРОВАТЬ
Начиная с jQuery 1.7, .live()
метод устарел.Использовать .on()
для подключения обработчиков событий.Пользователи старых версий jQuery должны использовать .delegate()
в предпочтении .live()
.
Вы можете попробовать приведенный ниже код
$(this).toggleClass('ui-icon-plusthick ui-icon-minusthick');
Я написал эту функцию jQuery, а не плагин, для циклического переключения любого количества классов.Два действуют как переключатель.Просто поместите CSV с именами классов в классы данных элемента.Затем запустите его с помощью $(selector).cycleClass().
Посмотрите его в использовании на www.PluginExamples.com/draggable выбирать перетаскиваемая ось.
(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);
}
});
Вместо того, чтобы делать весь этот Javascript, почему бы вам просто не изменить ui-icon-plusthick Класс CSS для отображения минусового изображения вместо плюсового изображения?