0

私はjavascriptが初めてです..私はDOM SCRIPTINGという本を読んでいます..

例をコーディングしようとしましたが、残念ながらリンクには直接の画像が表示されます..私がやろうとしているのは、画像を交換することです. ここにjsコードがあります

 document.ready = function () {
     function showPicture(pictureChoosen) {
            var source = pictureChoosen.getAttribute('href');

            var placeholder = document.getElementById('plaecehlder');
            placeholder.setAttribute('src', source);

        }

    }

そして、ここに私のhtmlコードがあります

   <ul>
    <li><a href="images/journee.jpg" onclick="showPicture(this);return false;">Journee</a></li>
    <li><a href="images/coffee.jpg">Coffee</a></li>

</ul>
<img id="plaecehlder" src="*" alt="" />Placeholder

私が間違っているところを教えてください..ありがとう...

4

1 に答える 1

1

これは必要ありません：

document.ready = function () {

}

関数を定義するだけです。onclick関数は別の関数内にあるため、ハンドラーが見ているグローバルスコープではなく、ローカルスコープ内にのみあります。より良いのは、要素に id を与えることです:

document.getElementById("foo").attachEvent // IE

document.getElementById("foo").addEventListener // standards-compliant

attachEventドキュメント

addEventListenerドキュメント

jQuery$(document).ready(function(){});と通常の DOM を混同している可能性があります。それはのショートカットです

document.addEventListener("DOMContentLoaded", function(){}, false);

onload古いブラウザでは window イベントにフォールバックします。すべてを 1 つの関数にまとめたい場合は、次のようにします。

window.onload = function() {

    function showPicture(pictureChoosen) {
        var source = pictureChoosen.getAttribute('href');
        var placeholder = document.getElementById('plaecehlder');
        placeholder.setAttribute('src', source);

    }

    document.getElementById("foo").onclick = function() {
        showPicture(this);
        return false;
    }
}

要素に割り当てているのと同じスコープで関数が定義されるようにします。

于 2013-02-24T15:49:19.933 に答える