Problem mit toggleclass, um die Spannweite der div zu ändern

Question

Ich benutze Blueprint CSS Framework. Ich habe einen Artikel über 24 Spalten, aber ich versuche, jquery toggleclass (onclick) zu verwenden, um es auf 20 Spalten zu reduzieren und die Schaltflächen für Aktionen in den verbleibenden 4 Spalten anzuzeigen.

$("div").each(function() { 
    $(this).click(function() { 
    $(this).toggleClass("span-24"); 
    $(this).toggleClass("span-20"); 
    }); 
}); 

Ich habe mehr als ein div so dass ich jedes verwenden. Aber es funktioniert nicht.

Ich schätze jede Hilfe.

Answer 1

Dieser Code sollte tun, was Sie nach:

$("div").toggle(function() { 
    $(this).attr("class", "span-24"); 
}, function() { 
    $(this).attr("class", "span-20"); 
}); 

Answer 2

Sie können das click-Ereignis an alle divs ohne die each-Schleife binden. Außerdem können Sie die :gt()greater-than selector und dann toggle()the visibility dieser Spannweiten verwenden

$("div").click(function() { 
    $(this).find("span:gt(19)").toggle(); 
}); 

Answer 3

1. Sie keine Klassen wollen wechseln alle divs haben Sie, eher nur die mit Inhalt

2. können Sie sogar diesen Code mehr vereinfachen:

   $ ('# toggler'). Click (function() { $ ('# content'). ToggleClass ('span-20 span-24'); });

die #toggler.click() ist nur eine von Ereignissen, die die toggleClass(), in Ihrem HTML laufen kann es onload sein könnte oder was auch immer:

$('#content').toggleClass('span-20 span-24'); //main code (and all of it, too) 

Beispiel: http://jsfiddle.net/hhMFs/1/

Answer 4

Sie können dies auch tun:

$("div").click(function() { $(this).toggleClass("span-20 span-24"); });