画像をクリックすると、一致するスパンのクラスだけでなく、画像ソースも変更されます。
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 を使用しています。