Question

单击图像时，图像源应该更改，以及匹配范围的类。

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”。

Answer 1

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

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

此外，此方法可以理解 - 返回array，这意味着如果不迭代元素，就无法运行className方法。

Answer 2

您需要引用父节点，如下所示：

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 个答案: