脚本在jsfiddle中工作但在站点中不起作用

时间:2013-07-17 02:47:50

标签: javascript jsfiddle

我见过其他人问这个问题,但我找不到对我有用的答案。 我不久前发了一个问题,有人发给我这个jsFiddle:http://jsfiddle.net/r043v/LgXQX/1/

它确实完全符合我的需要,并且该网站说它完全有效,但是当我将其粘贴到我的文档中时它无效。我读到了你在c + p时会添加的额外隐形字符,所以我使用了jslint,它说我已经摆脱了它们,但它仍然没有用。

这是代码,因为它在我的页面中(我在第一次没有工作后从头开始,所以我确信我的代码中没有别的东西搞乱了)

    <!DOCTYPE html>

<head>
 <link rel="stylesheet" href="style3.css">
<script type=”text/javascript” src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script>
$("#issues > li").click(function () {
    var $img = $("#theimg");
    var $li = $(this);
    var newsrc = "";
    newsrc = $li.data("img");
    if (newsrc === undefined) newsrc = "issue" + $li.index() + ".jpg";

    var loadstep = 0;

    function endstep() { // end of preload or hide
        if (++loadstep === 2) // if the preload is done and hide too, change src and show picture
        $img.attr("src", newsrc).animate({
            opacity: 1
        });
    }

    // preload picture
    var $tmpimg = $("<img/>", {
        src: newsrc
    }).on("load", endstep);
    // hide container picture
    $img.animate({
        opacity: 0
    }, endstep);
    });
</script>

</head>

css文件只包含jsFiddle中的内容,并且从小提琴中的html部分复制并粘贴正文。任何见解将不胜感激!

1 个答案:

答案 0 :(得分:1)

您需要在$(document).ready()处理程序中加载脚本。 Fiddle为您添加它。因此它在那里工作。

$(document).ready(function () {
    $("#issues > li").click(function () {
        var $img = $("#theimg");
        var $li = $(this);
        var newsrc = "";
        newsrc = $li.data("img");
        if (newsrc === undefined) newsrc = "issue" + $li.index() + ".jpg";

        var loadstep = 0;

        function endstep() { // end of preload or hide
            if (++loadstep === 2) // if the preload is done and hide too, change src and show picture
            $img.attr("src", newsrc).animate({
                opacity: 1
            });
        }

        // preload picture
        var $tmpimg = $("<img/>", {
            src: newsrc
        }).on("load", endstep);
        // hide container picture
        $img.animate({
            opacity: 0
        }, endstep);
    });

});