jQuery .addclass对多个div进行添加类名

Question

我正在尝试将之前定义的类“ .lightGray”应用于第4、5、7个div和当前的div。不确定我做错了什么！

$("#Div8").click(function(){$("#Div4", "#Div5","#Div7","#Div8").addclass(".lightGray");});

- Ryan Parker

---

方法的名称是.addClass()。 - Ram

Answer 1

使用 .addClass("lightGray");，因为.addClass()接受className而不是.className

并且更改

$("#Div4,#Div5,#Div7,#Div8")

 $("#Div4 ,#Div5, #Div7 ,#Div8")

请查看多重选择器

你的代码变成了

$("#Div8").click(function(){
$("#Div4 ,#Div5 ,#Div7 ,#Div8").addClass("lightGray");
                                          ^ //remove dot from here
});

- Tushar Gupta - curioustushar

---

$("#Div3").click(function(){$("div").css("background","beige");}); $("#Div4").click(function(){$(this).hide();}); $("#Div5").click(function(){$("#Div4").show();}); $("#Div6").click(function(){$(this).append("<p>I am alive!</p>");}); $("#Div8").click(function(){$("#Div4", "#Div5","#Div7","#Div8").addclass("lightGray");}); - Ryan Parker

我仍然有问题，我的元素是否被正确表示？ - Ryan Parker

@TusharGupta：是的，现在正确了，因为你加了逗号。 - Guffa

你已经多次更新了答案，并链接到了.addClass()文档，但没有注意到OP正在使用addclass！ - Ram

是的，现在它涵盖了所有问题 :) - Ram

Answer 2

在所有的DIV中，我都加入了一个默认类：changeClass，并保留它们各自的ID。

不必写成$("#Div4","#Div5","#Div7","#Div8")，只需使用$(".changeClass).addClass("lightGray");即可。

类可以同时应用于多个元素，从而可以一次性地操作多个元素，节省时间和代码行数。

- Walter Gandarella

Answer 3

当您添加类时，不需要使用点号。

可以尝试这样做。

$("#Div8").click(function(){$("#Div4, #Div5, #Div7, #Div8").addClass("lightGray");});

- Scary Wombat

Answer 4

你已经创建了四个不同的选择器，而不是一个选择器。

逗号应该在字符串内部。

$("#Div4,#Div5,#Div7,#Div8")

这个方法名是addClass，而不是addclass，类名前面不应该有句号：

$("#Div8").click(function(){$("#Div4,#Div5,#Div7,#Div8").addClass("lightGray");});

- Guffa

---

@RyanParker：我测试过了，它可以正常工作：http://jsfiddle.net/7qXMx/ 请检查您的代码是否有任何不同。 - Guffa

Answer 5

试试这个。

$("#Div8").click(function(){
 $("#Div4,#Div5,#Div7,#Div8").addClass("lightGray");  //removed exra quotes from selecter
                                                      //removed dot(.) from class name
                                                     //Changed *addclass* to **addClass**
});

- sudhAnsu63

---

@RyanParker 你是否已经使用文档就绪处理程序包装了代码？ - Ram

是的，已经完成了！这是带有样式区域的代码。 - Ryan Parker

<style> body { width: 980px; margin: 0 auto; } div { margin: 15px; padding: 15px; cursor: pointer; }
.lightGray { background-color: #cccccc; } .gold { background-color: gold; color: maroon; } </style> - Ryan Parker

@RyanParker Div8最初是存在的还是在DOM准备就绪后添加的？ - sudhAnsu63

div8只出现在这一行。我应该改为“这个”吗？ - Ryan Parker

不用担心。尝试在点击事件处理程序中放置一个警报。还要检查是否有控制台错误。 - sudhAnsu63