使用toggleclass来改变div的范围的问题

Question

我正在使用蓝图css框架。我有一篇文章跨越24列，但我尝试使用jquery toggleclass（onclick）将其减少到20列，并显示其余4列中的操作按钮。

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

我有多个div，所以我每个都使用。但它不起作用。

我感谢任何帮助。

Answer 1

您可以将click事件绑定到没有each循环的所有div。此外，您可以使用这些范围的:gt() greater-than selector然后toggle() the visibility

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

Answer 2

此代码应该完成您的目标：

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

Answer 3

1. 您不想在您拥有的所有divs上切换课程，而只想在内容
的课程中切换课程

2. 您甚至可以更多地简化此代码：

   $（ '＃toggler'）。点击（函数（）{   $（'＃content'）。toggleClass（'span-20 span-24'）; }）;

#toggler.click()只是可以运行toggleClass()的事件之一，在您的HTML中它可以是onload或其他：

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

示例：http://jsfiddle.net/hhMFs/1/

Answer 4

你也可以这样做：

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