Alternar entre duas classes no jQuery
Pergunta
Estou tentando modificar os ícones para o Portlets de interface do usuário do jQuery. Em vez de ter uma vantagem para minimizar e um menos para expandir, eu queria trocá -los.
Eu só tive sucesso limitado com ele, onde a primeira vez para clicar no menos que ele vira para uma vantagem, mas o Plus nunca vira para um menos. Qualquer ajuda sobre isso seria muito apreciada.
Aqui está uma amostra 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>
Aqui está o que eu criei para o 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: Aqui está o JavaScript original do site de demonstração da UI da 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>
Não sei exatamente como eles foram capazes de obter o mais e menos para alternar corretamente.
Solução
Provavelmente, porque quando você vincula essas funções, não há resultados para $ (". Portlet-header .ui-icon-plushick"). Não encontra. Você pode adicionar essa ligação a $ (". Portlet-header .ui-icon-minusthick"). Clique em (function () {... depois de adicionar a classe "Ui-icon-plusick".
Editar: a solução alternativa pode 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();
});
Portanto, o primeiro clique seria a primeira função e o segundo clique seria a segunda função.
Outras dicas
Que tal
$(YOUR_ELEMENT).live("EVENT_NAME", function() {
$(".portlet-header").toggleClass("ui-icon-plus").toggleClass("ui-icon-minus");
});
Ainda mais curto
$(YOUR_ELEMENT).live("EVENT_NAME", function() {
$(".portlet-header").toggleClass("ui-icon-plus ui-icon-minus");
});
EDITAR
A partir de jQuery 1.7, o .live()
o método é descontinuado. Usar .on()
Para anexar manipuladores de eventos. Usuários de versões mais antigas do jQuery devem usar .delegate()
em preferência a .live()
.
Você pode tentar o código abaixo
$(this).toggleClass('ui-icon-plusthick ui-icon-minusthick');
Eu escrevi essa função jQuery, não um plug -in, para percorrer qualquer número de classes. Dois atos como uma alternância. Basta colocar seu CSV de nomes de classe nas classes de dados do elemento. Em seguida, passeá -lo com $ (seletor) .cycleclass ()
Veja em uso em www.pluginexamples.com/draggable escolher eixo 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);
}
});
Em vez de fazer todo esse javascript, por que você não apenas modificou o Ui-icon-plushick Classe CSS para mostrar a imagem menos em vez da imagem Plus?