Question

这是我正在处理的网页上严重删减的源代码。

<!--// 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 selected'来更改元素的外观。 id的原因是因为我在页面上有几十个这样的元素。我目前使用的javascript是：

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

单击链接时，haveItem()函数会运行，但不会更改类。如何更改我的脚本以便单击该链接将更改该类？

Answer 1

我假设您使用的是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类。
JavaScript中当前不存在函数getElementbyTitle()。另外，请再次注意资本化。通常，函数中每个单词的第一个字母都是大写的。因此，如果它确实存在，则称为getElementByTitle()（注意B而不是b。）

Answer 2

这里：

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

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

（在旧版浏览器中不起作用。）

Answer 3

如果您不能使用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";

请注意，此处有无错误处理/空检查。并且这处理了一个简单的情况，即只更改具有指定类的第一个子节点，假设它存在。

但是如果可以使用它，则更喜欢jQuery。从您使用addClass/removeClass开始，您似乎已经期待jQuery了。

Answer 4

这应该为你完成任务：

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

但是，您应该了解DOM。您使用的所有方法（getElementbyID，getElementsbyTitle，removeClass和addClass）都不存在。

Answer 5

成功找到元素后，您可以执行以下操作之一：

element.classList.add("selected");

它使用了一个相当新的classList功能，适用于FF 3.6，IE 10，Chrome 8，Opera 11.50，Safari 5.1及更高版本。一旦您确定您的客户将拥有其中一种浏览器（不久的将来），它就是最受欢迎的方式。
element.className += " selected";

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

Javascript更改元素的类

5 个答案: