我在尝试 .slideUp() 当前图像时遇到一些问题。它所做的只是 .slideUp() 我单击的链接后面的图像。我不知道如何获取当前图像的路径并将该图像向上滑动。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
<link rel="stylesheet" href="main.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="image_gallery.js"></script>
</head>
<body>
<section>
<h1>Image Gallery</h1>
<ul id="image_list">
<li><a href="images/casting1.jpg" title="Casting on the Upper Kings">Upper Kings</a></li>
<li><a href="images/casting2.jpg" title="Casting on the Lower Kings">Lower Kings</a></li>
<li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn">Big Horn</a></li>
<li><a href="images/fish.jpg" title="Catching on the South Fork">South Fork</a></li>
<li><a href="images/lures.jpg" title="The Lures for Catching">Lures</a></li>
</ul>
<h2 id="caption">Casting on the Upper Kings</h2>
<p id="gallery">
<img src="images/casting1.jpg" alt="Image Gallery area" id="image">
</p>
</section>
</body>
</html>
JS:
$(document).ready(function() {
$("#image_list a").each(function() {
// get the image URL and caption for each image
var imageURL = $(this).attr("href");
var caption = $(this).attr("title");
// preload the image for each link
var galleryImage = new Image();
galleryImage.src = imageURL;
// set up the event handlers for each link
$(this).click(function(evt) {
$("#gallery img").slideUp(2000);
$("#image").attr("src", imageURL);
$("#caption").text(caption);
// cancel the default action of each link
evt.preventDefault();
}); // end click
}); // end each
// move the focus to the first link
$("#image_list:first-child:first-child").focus();
}); // end ready
最佳答案
从每个循环中删除它:
$(this).click(function(evt) {
$("#gallery img").slideUp(2000);
[....]
});
然后将其放在循环之外:
$('#image_list a').on('click', function(){
var imageURL = $(this).attr("href");
var caption = $(this).attr("title");
$("#image").attr("src", imageURL);
$("#caption").text(caption);
return false;
});
如果您想要幻灯片效果，请使用complete 事件:
$('#image_list a').on('click', function(){
var imageURL = $(this).attr("href");
var caption = $(this).attr("title");
$('#gallery img').slideUp( "slow", function() {
$("#image").attr("src", imageURL);
$("#caption").text(caption);
$('#gallery img').slideUp( "slow" );
});
return false;
});
关于javascript - jQuery 如何 .slideUp() 当前图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33601661/