2

問題が発生しました。何度か試しましたが、結果は常に同じです。コードの何が問題なのかわかりません。右の画像をクリックすると左の画像に変わりますが、左の画像をクリックしても右の画像に変わりません。コードは次のとおりです。

    function changeImage() {

    if  (document.getElementById("changer").src == "imgs/left.gif")
    {
        document.getElementById("changer").src = "imgs/right.gif";
    }
    else 
    {
        document.getElementById("changer").src = "imgs/left.gif";
    }

}

ここに画像のsrcコードがあります：

<img  src="imgs/right.gif" id="changer" onclick="changeImage()"/></a>

この機能が必要です：（右矢印の画像）をクリックすると、（左矢印の画像）に変わり、同じ（左矢印の画像）をもう一度クリックすると、デフォルト（右矢印の画像）に戻ります。

お時間とご協力いただきありがとうございます。

4

8 に答える 8

4

Prabu が回答で説明したように、実際の src は絶対パスであり、相対パスではありません。

これを解決するには:

  • 要素オブジェクト、つまりthisを引数として関数に渡します。
  • 要素オブジェクト内、つまりその関数内に変数blnを作成します。element
<img src="imgs/right.gif" id="changer" onclick="changeImage(this)" />
                                                             ^ pass the element object             

 function changeImage(element) {
     element.src = element.bln ? "imgs/right.gif" : "imgs/left.gif";
     element.bln = !element.bln;  /* assigns opposite boolean value always */
 }

上記の関数は、プロパティ内に存在する値に依存せずに、画像の src を切り替えsrcます。

サンプルフィドル

ところで、CSS だけを使用してこれを行うこともできます。

働くフィドル

于 2013-08-29T05:49:07.430 に答える
3

ちょっと問題はあなたが言及foldername/filenameしましたが、 document.getElementById("changer").srcfullpathは C:\Users\ws21\Desktop\imgs\right.gif のように与えます

例えば

 function changeImage() {

//its checking C:\Users\ws21\Desktop\imgs\right.gif=="imgs\left.gif"
        if  (document.getElementById("changer").src == "imgs/left.gif")
        {
            document.getElementById("changer").src = "imgs/right.gif";
        }
        else 
        {
            document.getElementById("changer").src = "imgs/left.gif";
        }

    }

したがって、常にelse部分のみを実行します

于 2013-08-29T05:30:40.047 に答える
2

これを試して ：

$("#changer").click(function(){
    imagePath = $("#changer").attr("src");
    if(imagePath == "http://behdasht.co/wp/imgs/left.gif"){
        $("#changer").attr("src", "http://behdasht.co/wp/imgs/right.gif");

    }else{
        $("#changer").attr("src", "http://behdasht.co/wp/imgs/left.gif");
    }
});

//Updated to use jquery completely

フィドル: http://jsfiddle.net/8hGWZ/

http://jsfiddle.net/8hGWZ/2/ (完全な jquery)

于 2013-08-29T05:22:49.750 に答える
1 
function changeImage() {
    var src = document.getElementById("changer").src;   
var imgsrc = src.substring(src.lastIndexOf("/")+1);
if  (imgsrc == "left.gif")
{
    document.getElementById("changer").src = "imgs/right.gif";
    console.log('if'+document.getElementById("changer").src);
}
else 
{
    document.getElementById("changer").src = "imgs/left.gif";
    console.log('if'+document.getElementById("changer").src);
}

}

上記を使用するとうまくいくはずです

フィドルのデモ

于 2013-08-29T05:16:31.003 に答える
0

あなたが持っているものはうまくいくはずです。

短いバージョンは次のとおりです。

function changeImage() {
    this.src = this.src == "imgs/left.gif" ? "imgs/right.gif" : "imgs/left.gif";
}
于 2013-08-29T05:14:03.380 に答える
0

問題は解決しました。ここに完全な答えがあります: 画像 URL のフル パスを使用する必要があります。そうしないと機能しません。

 function changeImage() {
    if  (document.getElementById("changer").src == "HTTP://YOURDOMAIN/left.gif")
    {
        document.getElementById("changer").src = "HTTP://YOURDOMAIN/right.gif";
    }
    else 
    {
        document.getElementById("changer").src = "HTTP://YOURDOMAIN/left.gif";
    }

}

Prabu Parthipanに特に感謝します

別の方法があります：

<img src="imgs/right.gif" id="changer" onclick="changeImage(this)" />

(this) を使用する場合、画像 URL のフルパスを使用する必要はありません。この場合は、MR GREEN のおかげです... !

于 2013-08-29T06:29:57.323 に答える
0

デモ

HTML

<a/>
<img src="imgs/right.gif" id="changer" onclick="changeImage(this)" />
</a>

js

i=1;
function changeImage(el) {
    el.click=++i;
    el.src = ((el.click)%2 == 0) ? "imgs/right.gif" : "imgs/left.gif";
}
于 2013-08-29T05:23:08.870 に答える
0

ねえ、JavaScriptのような画像の完全なパスを試してください

if  (document.getElementById("changer").src == "http://mydomain.com/imgs/left.gif")
{
    document.getElementById("changer").src = "http://mydomain.com/imgs/right.gif";
}

一部のブラウザは、src で完全な URL を使用します

または、これを確認できます

  <img  src="http://behdasht.co/wp/imgs/right.gif" id="changer" onclick='javascript: this.src = this.src == "http://behdasht.co/wp/imgs/left.gif" ? "http://behdasht.co/wp/imgs/right.gif" : "http://behdasht.co/wp/imgs/left.gif";'/>
于 2013-08-29T05:25:29.777 に答える