0

这是我现在正在处理的网页中大量削减的源代码。

<!--// 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()函数运行，但它不会更改类。如何更改我的脚本以便单击链接将更改课程？

4

5 回答 5

4

我假设您正在使用 jQuery，因为您正在使用removeClass()and 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. 该函数getElementbyTitle()目前在 JavaScript 中不存在。另外，再次注意大小写。通常，函数中每个单词的首字母大写。因此，如果它确实存在，它将被调用getElementByTitle()（注意B而不是b）。
于 2012-06-27T21:27:58.247 回答
1

这里：

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

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

（不适用于旧版浏览器。）

于 2012-06-27T21:42:09.237 回答
0

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

于 2012-06-27T21:30:33.297 回答
0

这应该为您完成任务：

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

但是，您应该了解DOM。您使用的任何方法（、 和getElementbyID）getElementsbyTitle都不存在。removeClassaddClass

于 2012-06-27T21:33:48.593 回答
0

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

  1. element.classList.add("selected");

    它使用了一个相当新classList的功能，可用于 FF 3.6、IE 10、Chrome 8、Opera 11.50、Safari 5.1 及更高版本。一旦您确定您的客户将拥有其中一种浏览器（不久的将来），这是最首选的方式。

  2. element.className += " selected";

    className文档。这很有效，可能是最简单的方法。没有那么好classList，但适用于所有浏览器。

于 2012-06-27T21:42:45.597 回答