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

私の問題は、クラス名を変更したい要素を取得していないようです。画像の変更は完全に機能しますが、クラス名を変更できません。

正しい要素を取得していないため、クラス名が変更されていないのは正しいですか? 正しい場合、現在のソリューションが機能しないのはなぜですか?

追加情報: 画像が変更されたときに「badge Badge-default」に変更したい を使用して、ブートストラップ Twitter を使用しています。

4

2 に答える 2

0

方法はありませんgetElementByClassName。正しい方法はgetElementsByClassNames、 複数のElementsに注意してください。

より一般的なのは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 に答える