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

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

首先：我必须为读取事件方法创建一个事件处理程序，这是我做的。

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

第三：我必须为每个链接的click事件添加一个事件处理程序。此事件处理程序的函数应该接受一个名为event的参数。这个事件处理程序的jQuery代码应该显示被点击的链接的图像和标题。另外，它应该使用evt参数来取消链接的默认操作。我被困在第三个问题上：请提供任何帮助。

这里是我的HTML，JavaScript和CSS代码：

$(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); 
 
    }); 
 
    
 
}); 
 
});

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 { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
h1 { 
 
\t padding-bottom: .25em; 
 
\t color: blue; 
 
} 
 
h2 { 
 
\t font-size: 120%; 
 
\t padding: .5em 0; 
 
} 
 
li { 
 
\t padding: 0 0.25em; 
 
\t display: inline; 
 
} 
 
#caption, #gallery { 
 
\t text-align: center; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <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"> 
 
    \t <img src="images/casting1.jpg" alt="Image Gallery area" id="image"> 
 
    </p> 
 
</section> 
 
</body> 
 
</html>

来源

2016-11-18 Jabateh

看看这个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 

});

我用城堡的照片，因为，你的标题让我想起了城堡。

来源

2016-11-18 16:56:45 rosendin

OP获得A +的分配。简单。 –

嘿，我只是更新我的代码。当我第一次运行代码并点击任何链接时，它将转到带有标题的最后一张图像，并成为一个带有标题的图像。你能告诉我我做错了什么吗？ – Jabateh

看看小提琴。 '$（'a'）。click（）'事件代码必须在'$（document）.ready（）'代码之外。否则，你会得到你遇到的问题。 – rosendin

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

回答

相关问题