1

单击图像时，图像源应更改，以及匹配跨度的类。

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>

我已经尝试了无数次尝试来更改类名，灵感来自“使用简单的跨浏览器 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”。

4

2 回答 2

0

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

这是一个可以理解的混淆，因为更常见的是getElementById. 产生这种差异的原因是，与 相反id，aclass可以指代多个元素。

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

于 2013-03-19T12:49:44.873 回答
0

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

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";
}

}

于 2013-03-19T13:02:21.140 回答