Javascript 更改div的类名

Javascript 更改div的类名,javascript,prototypejs,Javascript,Prototypejs,在我的页面中,我想更改div id=question中id为answer1的div的类名。我该怎么做?谢谢 $('question1 answer1').addClassName('new_name'); <div id="question1"> <div id="answer1" class="old_name"> </div> </div> <div id="question2"> <div id="an

在我的页面中,我想更改div id=question中id为answer1的div的类名。我该怎么做?谢谢

$('question1 answer1').addClassName('new_name');

<div id="question1">
   <div id="answer1" class="old_name">
   </div>
</div>

<div id="question2">
   <div id="answer2" class="old_name">
   </div>
</div>
$('question1 answer1')。添加类名('new_name');
只需
$('answer1')
即可获得所需div元素的引用。
$
函数返回具有给定id字符串的元素(如果未找到,则返回null)。请注意,使用
$
时不使用选择器字符串-它仅对ID进行操作

$
函数接受CSS选择器字符串并返回所有匹配元素的数组,如果没有匹配元素,则返回空数组。如果您想要或需要走这条路线,您可以像下面这样找到同一个div:

$$('#question1 .answer1')[0]

使用上述任一方法获得元素引用后,可以使用
addClassName
removeClassName
或任何其他可用的元素方法

因此,正如已经指出的,任何选择器方法都需要某种迭代器,因此您不能只将方法应用于所有返回的对象。您将在
元素的文档中注意到。选择
可以减少将对象显式转换为数组的工作量,但我在JSFIDLE上没有这样做。但是,我确实尝试了以下方法:

 $('answer2').addClassName('new_name');
​ 而且效果很好。我不知道问题是您试图在原始元素对象中遍历DOM(通过使用question1 answer1),而这需要对象/数组迭代器,还是只是代码中的一个小问题。但在您的特定示例中,由于您知道要更改其类的实际元素的id,因此上述代码应该可以正常工作,而无需指定父元素或使用任何类型的数组索引

我承认prototypejs抛弃了我,因为它们对元素对象使用与可枚举对象相同的方法名,所以我看到了
select
的第一个实例,并认为它看起来很简单。现在已经看到,几乎每个类/方法都需要您设置一个选择器并转换它或手动遍历它,我要明确地说,使用jquery这将更容易,并且您最初的注释(它们几乎相同)在这种情况下是不正确的。也许Projs提供了jQuery不具备的一些特性,也许您的代码与Projjs绑定(我在一个项目上工作了一年,不得不使用YUI,这是一个更大的噩梦,相信我),但是jQuery被设置为与原型PysJs玩得很好,所以在这样的情况下,我会考虑使用这两个。在jquery中,代码应该是:

jQuery.noConflict();  // Avoids $ fight between jquery and prototypejs
jQuery( '#question1 #answer1' ).addClass('new_name');
或者,要先删除旧的:

jQuery.noConflict();  // Avoids $ fight between jquery and prototypejs
jQuery( '#question1 #answer1' )removeClass('old_name').addClass('new_name');
此外,prototype有一个toggleClass方法,它可能也不必要地深奥,但也许您应该阅读以下内容:


我不会因为在这件事上浪费时间而生气(因为我不愿意考虑学习新的框架,浪费时间),只是他们的文档虽然很吸引人,但却有我见过的最坏的例子。他们都假设你有一些基本的想法,但从来没有一个友好的现实世界的例子或链接到实例和类之间的区别,他们区分两者的例子是相同的。今天晚些时候,我肯定会抽出一些时间来找到你问题的真正最佳答案,出于怨恨和自豪,如果没有其他原因,但如果真的要每次迭代,只需使用vanilla js,并在实际有用时使用此框架。

PS:使用jquery会容易得多,所以除非你嫁给prototypejs,否则我会让你的转换更容易?这两个库在如何实现这一点上几乎没有区别。您的答案似乎是混合使用了Prototype和jQuery。在调用元素方法之前,您需要访问返回的$$数组中的单个元素。Prototype不会自动应用这些调用。要么使用Array.each,要么直接使用[]访问元素我从未使用过prototype,但我从它们的api页面复制了所有示例代码。在使用addclass方法时(仅供参考,jquery中也存在这种方法),不需要每个或数组的特定性。如果我读错了,你会仔细检查和编辑。幸好你回答了一个原型特定的问题,并反对图书馆从未使用过它。哦,快!