使用切换类更改 div 跨度时出现问题

Question

我正在使用蓝图 CSS 框架。我有一篇文章跨越 24 列，但我尝试使用 jQuery 切换类 (onclick) 将其减少到 20 列，并在剩余 4 列中显示操作按钮。

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

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

我很感激任何帮助。

Answer 1

这段代码应该做你想做的事：

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

Answer 2

您可以将点击事件绑定到所有 div，而无需 each 循环。另外，您可以使用 :gt() 大于选择器 然后 toggle() 这些跨度的可见性

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

Answer 3

1. 您不想在拥有的所有 div 上切换类，而只想在包含内容的 div 上切换类

2. 您甚至可以进一步简化此代码：

   $('#toggler').click(function(){
   $('#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"); });