javascript - トグルクラスを使用してdivのスパンを変更する際の問題

Question

ブループリント CSS フレームワークを使用しています。24 列にまたがる記事がありますが、jQuery toggleclass ( onclick) を使用して 20 列に減らし、残りの 4 列にアクションのボタンを表示しようとしています。

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

複数の div があるため、それぞれを使用していますが、機能しません。

助けていただければ幸いです。

score 1 · Accepted Answer

このコードはあなたが求めていることをするはずです：

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

score 1 · Accepted Answer

eachクリックイベントをループなしですべての div にバインドできます。また、:gt() 大なりセレクターを使用して、それらのスパンtoggle() の可視性を使用することもできます

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

score 0 · Accepted Answer

これを行うこともできます：

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

score 0 · Accepted Answer

divsコンテンツのあるクラスだけでなく、持っているすべてのクラスを切り替えたくない
このコードをさらに単純化することもできます:

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

これ#toggler.click()は、を実行できるイベントの 1 つにすぎtoggleClass()ません。HTML では、onload などである可能性があります。

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

4 に答える 4