访问和更改先前修改的元素之外的元素答案

【问题标题】：Accessing and changing an element outside a previously modifyied element访问和更改先前修改的元素之外的元素
【发布时间】：2013-03-19 12:44:02
【问题描述】：

当点击图片时，图片源应该会改变，匹配范围的类也会改变。

HTML：

<span class="oldClass">
    Some Text
    <img id="IdForThisImg" onclick="changeImage('IdForThisImg')" src="imgOld.png">
</span>
<span class="oldClass">
    Some Text 
    <img id="IdForAnotherImg" onclick="changeImage('IdForAnotherImg')" src="imgOld.png">
</span>

在"Adding and Removing Classes, with simple cross-browser JavaScript" 的启发下，我尝试了无数次更改类名的尝试。

Javascript：

function changeImage(id)
{
    element=document.getElementById(id)
    if (element.src.match("imgOld"))
    {
        element.src="imgNew.png";
        document.getElementByClassName("oldClass").className = "newClass";
    }
    else
    {
        element.src="imgOld.png";
        document.getElementByClassName("newClass").className = "oldClass";
    }
}

我的问题似乎是我没有得到想要更改其类名的元素。更改图像效果很好，但我无法更改类名。

类名没有改变是正确的，因为我没有得到正确的元素，如果不是，你能指出它的方向吗？如果正确，为什么我当前的解决方案不起作用？

附加信息：我正在使用 bootstrap twitter，使用 a ，当图像更改时，我想将其更改为“badge badge-default”。

【问题讨论】：

标签： javascript class function element

【解决方案1】：

你需要引用父节点，像这样：

function changeImage(id)
{
//Element
var element=document.getElementById(id);
//And parent node
var parent = document.getElementById(id).parentNode;
if (element.src.match("imgOld"))
{
    element.src="imgNew.png";
    parent.className = "newClass";
}
else
{
    element.src="imgOld.png";
    parent.className = "oldClass";
}

}

【讨论】：

【解决方案2】：

没有getElementByClassName 方法。正确的方法是getElementsByClassNames，注意复数Elements。

这是一个可以理解的混淆，因为更常见的是getElementById。造成这种差异的原因在于，与id 不同，class 可以引用多个元素。

此外，可以理解的是，此方法将返回 array，这意味着您无法在不迭代元素的情况下运行 className 方法。

【讨论】：

非常感谢，我只是在span中添加了一个id，并用它代替了类来获取元素，并更改了类名。这可能不是最简单的方法，但确实有效。
如果您有多个 span 按照您的示例，它可能工作，但请不要破坏互联网！你同一页面上不能有多个具有相同id 的元素。