-2

ここに投稿した以前の投稿の誰かのコードを使用しようとしています。その中で、彼は2 つの画像を切り替える方法を示すjsFiddleを提供しました。

その人がしていることを正確に再現しようとしていますが、私のコードではうまくいかないようです:

<!DOCTYPE html>
<html>
<head>

<script src="jquery.js"></script>

<script>

$('#ellomatey').toggle(
function(){
    $(this).attr('src', 'bgimage.png');
},
function(){
    $(this).attr('src', 'redsquare.png');
});​

</script>

</head>

<body>
<img id="ellomatey"  src="bgimage.png"  />
</body>
</html>

私が間違っていることを誰かが知っていますか？関数を正しく呼び出していない気がしますが、その人の例ではうまくいくようです。

4

4 に答える 4

1

他の 2 つの回答は実際の問題について述べていますが、それを発見する方法については説明していません。これがデバッグの出番です。

console.log("before");
$('#ellomatey').toggle(
function(){
    console.log("bgimage"); $(this).attr('src', 'bgimage.png');
},
function(){
    console.log("redsquare"); $(this).attr('src', 'redsquare.png');
});​
console.log("after");

これを行うと、コンソールに「前」と「後」が表示されます。大丈夫。しかし、画像をクリックすると、他のコンソール ログが表示されることが予想されます。これは、トグル機能が想定どおりに機能していないことを意味します。

頻繁に使用される機能が適切に機能していると推測できるので、セレクターに何か問題があるに違いありません。それを調べてみましょう。

console.log($('#ellomatey'));

えっ、なに!? 要素なし。

そして、その理由を考え始めると、DOM がロードされるまで待つ必要があることがわかります。Web ページがどのように読み込まれるかについて、基礎となるバックグラウンドがいくつかあると仮定します。これは、あなたがやっていることの前提条件です。

ラッピング

$(document).ready(function() { ... });

それはまさにそれを行います。

必要なのは、少しの理解と簡単なデバッグ出力だけです...

うまくいくだろうと無意識にコーディングするのではなく、実行中に仮定を検証してください。

于 2012-09-14T14:55:26.750 に答える
0

柔軟なトグル スクリプトを作成しました。

jsBin デモ

画像の属性内に2 番目の画像 URLを配置dataします。

<img id="ellomatey"  src="img_1.jpg" data-src="img_2.jpg" />

クリックすると、「スワップ」関数が呼び出されます。

$(function(){  // BTW, you were just missing this 'ready' function :)

   function swap(){
       var mem  = this.src;
       this.src = $(this).data('src');
       $(this).data('src',mem);
   }    
   $('#ellomatey').click( swap );

});

このスニペットは、要素をネストするだけで複数の要素を処理することもできます。

 $('#ellomatey, .button, #something').click( swap );

(デモには純粋な JS バージョンも追加されています。楽しんでください!)

于 2012-09-14T17:25:13.020 に答える
0

コードを document.ready 呼び出しでラップする必要があります。ページの実際のコンテンツがロードされる前に、コードが実行を試みます。

<script>
$(document).ready(function() {
    $('#ellomatey').toggle(
    function(){
        $(this).attr('src', 'bgimage.png');
    },
    function(){
        $(this).attr('src', 'redsquare.png');
    });​
});
</script>
于 2012-09-14T14:46:33.870 に答える
0

ドキュメントにまだ存在しない要素のトグル関数を定義しているため、window.loadハンドラー (完全な画像の読み込みを待ちたい場合) またはdocument.readyイベントで js コードをラップする必要があります。

于 2012-09-14T14:48:35.820 に答える