JavaScript更改元素的类

这是从我正在工作的网页中严格修剪下来的源代码。JavaScript更改元素的类

<!--// GRID ENTRY //--> 
    <li class="entry" id="sjDDulC8wt"> 
     <div class="entry_actions"> 
      <ul class="entry_actions"> 
       <li class='have_it'> 
<a href='javascript: haveItem("name", "id", "none")' target='_self' title='Have It' class='have_it'>%</a></li> 
      </ul> 
     </div> 
    </li>

里面的haveItem()功能我想班上<a>元素的改变从“have_it”到“have_it选择”更改元素的外观。 id的原因是因为我在页面上有几十个这样的元素。目前我使用的JavaScript是：

var targetA = document.getElementbyID(sjDDulC8wt).getElementsbyTitle("Have_it"); 
targetA.removeClass("have_it").addClass("have_it selected");

当我点击链接时，haveItem()功能运行，但它不会改变的类。如何更改我的脚本，以便单击该链接将更改该类？

来源

2012-06-27 jaimerump

'getElementsbyTitle' ...是真的吗？ – Pointy

JavaScript中没有'removeClass'和'addClass'这样的函数。 'getElementsByTitle'也不存在。我通常犹豫回复“使用jQuery”，但**使用jQuery **。这是它真正擅长的事情。你的代码会归结为'$（'＃sjDDulC8wt [title = Have_it]'）。addClass（'selected'）'。 – meagar

这里有几个问题：（1）将id放在getElementByID的引号中。（2）getElementsByTitle不存在。（3）即使它确实存在，你的第二行试图对数组执行单个元素操作。（4）即使有效，函数addClass和removeClass也不存在。你可以通过使用jQuery来解决所有这些问题。 –

我假设您使用的是jQuery，因为您使用removeClass()和addClass。否则，我会建议您链接到jQuery，以便下面的代码可以正常工作，或仅使用JavaScript。

var targetA = $('#sjDDulC8wt .have_it'); 
targetA.addClass('selected');

以供将来参考，这里是你的代码中的一些东西，你可以改善：

getElementById()接受要检索的字符串元素的ID。基本上，你应该包装你的ID在'或"
要小心你的位置和下划线。它们不是同一件事。您的列表项标题为Have It，而您的JavaScript有Have_it。
大写事宜。 Have_It与Have_it不一样。当您尝试按ID获取元素时，请注意这一点。
其中有空格的类实际上是多个类。 have_it selected实际上同时具有have_it类和selected类。因此，没有必要删除have_it，然后添加have_it selected - 您可以直接添加selected类。
功能getElementbyTitle()目前在JavaScript中不存在。另外，请再次注意大小写。通常，函数中每个单词的首字母大写。因此，如果它确实存在，它将被称为getElementByTitle()（请注意B而不是b）。

来源

2012-06-27 21:27:58 Zhihao

我不知道这些函数只是JQuery，我发现它们的链接没有提到我看到的JQuery。我会继续为其他任何人绊倒这个标签。谢谢！ – jaimerump

如果你不能使用jQuery那么您可以更改使用className元素的类名：

var element = document.getElementById("elementId"); 
element.className = "have_it selected";

还要注意这个功能：getElementsByClassName（HTML5）。

正如已经指出的那样，在选择元素时还有其他一些问题。从你的榜样，它看起来像你想使用：

var element = document.getElementById("sjDDulC8wt"); 
var children = element.getElementsByClassName("have_it"); 
children[0].className = "have_it selected";

注意，有没有错误处理/ null检查这里。并且这处理了一个简单的情况，只是假定它存在，只改变具有指定类的第一个孩子。

但是如果你可以使用它，更喜欢jQuery。从你使用addClass/removeClass看来，你已经期待jQuery。

来源

2012-06-27 21:30:33 pb2q

这应该为你做的任务：

<a title="Have It" class="have_it" onclick="this.className+=' selected'">%</a>

然而，你应该了解DOM。您使用的方法都不存在（getElementbyID，getElementsbyTitle,removeClass和addClass）。

来源

2012-06-27 21:33:48 Bergi

这里：

var anchor = document.querySelector('#sjDDulC8wt [title="Have It"]'); 
if (anchor) anchor.classList.add('selected');

现场演示：http://jsfiddle.net/UZfnh/

（不会工作在旧的浏览器。）

来源

2012-06-27 21:42:09

当你成功地找到元素，你可以做其中之一：

element.classList.add("selected");

它使用FF3.6，IE10，Chrome8，Opera 11.50，Safari 5.1及更高版本的新功能classList。一旦你确定你的客户将拥有其中一种浏览器（不久的将来），它就是最好的方式。
element.className += " selected";

className doc。这有效，可能是最简单的方法。不像classList那么好，但适用于所有浏览器。

来源

2012-06-27 21:42:45

回答

相关问题