Javascript 更改元素的类

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');

以下是您的代码中可以改进的一些内容，供将来引用:

1. getElementById() 接受您想要以字符串形式检索的元素的 ID。基本上，您应该将 ID 包装在 ' 或 "
中
2. 请小心放置空格和下划线的位置。它们不是同一件事。您的列表项的标题为 Have It，而您的 JavaScript 的标题为 Have_it。
3. 大小写很重要。 Have_It 与 Have_it 不同。当您尝试通过 ID 获取元素时请小心。
4. 一个包含空格的类实际上是多个类。 have_it selected 实际上同时具有 have_it 类和 selected 类。因此，无需删除 have_it，然后添加 have_it selected - 您可以直接添加 selected 类。
5. JavaScript 中当前不存在函数 getElementbyTitle()。另外，再次注意大小写。通常，函数中每个单词的第一个字母都是大写的。因此，如果它确实存在，它将被调用 getElementByTitle() (注意 B 而不是 b)。