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

附加事件文档

addEventListener文档

您可能将 jQuery$(document).ready(function(){});与普通 DOM 混淆了。这是一个捷径

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

这将回退到onload旧浏览器中的窗口事件。如果要将所有内容包装在一个函数中，则需要：

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 回答