我见过其他人问这个问题,但我找不到对我有用的答案。 我不久前发了一个问题,有人发给我这个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部分复制并粘贴正文。任何见解将不胜感激!
答案 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);
});
});