0

自分のコードでやりたいことを実行するのに問題があります。表示/非表示を切り替えるように設定した複数のセクションがあり、正しく機能します。ただし、常に「もっと」で静的にするのではなく、画像をどこに切り替えようとしているのか、展開されたときに「少ない」に切り替えたいと思います。

それはうまくいきます...しかし、最初のものだけです。他のいずれかのボタンを押すと、最初のボタンだけが変更されます。ここでページを見ることができます：

http://jfaq.us

変数を使用していくつかの異なるソリューションを試しましたが、うまくいかないようです。

ヘルプ？前もって感謝します！

function changeImage() {
    if (document.getElementById("moreorless").src == "http://jfaq.us/more.png") 
    {
        document.getElementById("moreorless").src = "http://jfaq.us/less.png";
    }
    else 
    {
        document.getElementById("moreorless").src = "http://jfaq.us/more.png";
    }
}

function toggleMe(a){
    var e=document.getElementById(a);
    if(!e)return true;
    if(e.style.display=="none")
    {
        e.style.display="block"
    }
    else{
        e.style.display="none"
    }
    return true;
}

<div>

    <a href="http://jfaq.us/guestbook">Guestbook</a>

    <div>

        <input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage();return toggleMe('para3')" >

    </div>

<div id="para3" style="display:none">

This is normally hidden, but shows up upon expanding.
This is normally hidden, but shows up upon expanding.

</div>

    <a href="http://jfaq.us/about">About</a>

    <div>

        <input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage();return toggleMe('para2')" >

    </div>

<div id="para2" style="display:none">

This is normally hidden, but shows up upon expanding.
This is normally hidden, but shows up upon expanding.

</div>

</div>
4

4 に答える 4

0

これは、両方の画像に同じ ID を使用しており、getElementById が明らかに最初の画像を取得しているためです。

更新されたコードは次のとおりです: html:

 <input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage.call(this);return toggleMe('para3')" >

脚本：

// inside the event handler 'this' refers to the element clicked
function changeImage() {
    if (this.src == "http://jfaq.us/more.png") {
        this.src = "http://jfaq.us/less.png";
    } else {
        this.src = "http://jfaq.us/more.png";
    }
}
于 2013-08-02T18:24:46.960 に答える
0

これをチェックして

http://jsfiddle.net/Asb5A/3/

function changeImage(ele) {
if (ele.src == "http://jfaq.us/more.png") 
{
    ele.src = "http://jfaq.us/less.png";
}
else 
{
    ele.src = "http://jfaq.us/more.png";
}
}

<input type="image" src="http://jfaq.us/more.png" onclick="changeImage(this);return toggleMe('para3')" >
于 2013-08-02T18:58:03.733 に答える
0

すべての入力に同じ ID を使用しています。これが問題の原因です。すべての要素に一意の ID を付与します。

grp 操作を実行する場合は、jquery クラスを使用します。

于 2013-08-02T18:28:06.350 に答える