Question

我需要帮助。我必须编写一个javascript和jQuery代码，所以当我点击其中一个标题链接（例如：Big Horns，Lower Kings）时，它会显示该链接的图像和标题并显示它。

首先：我必须为read事件方法创建一个事件处理程序，我做了。

第二：我必须使用每种方法为每个 A 元素运行一个函数。并添加jQuery代码，获取每个图像的URL和标题，并预加载图像。我不认为我是否正确预加载。

第三：我必须为每个链接的click事件添加一个事件处理程序。此事件处理程序的函数应接受名为event的参数。此事件处理程序的jQuery代码应显示已单击的链接的图像和标题。此外，它应该使用evt参数来取消链接的默认操作。我坚持第三个问题：请帮忙。

这是我的HTML，Javascript和CSS代码：

＆＃13;

$(document).ready(function (){
var url, title;
$("a").each(function() {
    url = $(this).attr("href");
    title = $(this).attr("title");
    
    $("a").click(function (evt) {
        evt.preventDefault();
        $("#caption").text(title);
        $("img").attr('src', url);
    });
    
});
});

＆＃13;

article, aside, figure, footer, header, nav, section {
    display: block;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    width: 420px;
    margin: 0 auto;
    padding: 20px;
    border: 3px solid blue;
}
h1, h2, ul, p {
	margin: 0;
	padding: 0;
}
h1 {
	padding-bottom: .25em;
	color: blue;
}
h2 {
	font-size: 120%;
	padding: .5em 0;
}
li {
	padding: 0 0.25em;
	display: inline;
}
#caption, #gallery {
	text-align: center;
}

＆＃13;

<!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-latest.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>

＆＃13;

Answer 1

查看此JSFiddle。

您想要的JavaScript代码如下所示

$('a').click(function(evt) {
  evt.preventDefault(); // cancel default action of link

  var url = $(this).attr("href");
  var title = $(this).attr("title");

  $('#caption').text(title);
  $('img').attr('src', url); // change the image tag's source attribute to our url variable

});

我使用了城堡的照片，因为你的字幕让我想起了城堡。

JavaScript：单击接受名为e的参数的事件

1 个答案: