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的參數的點擊事件

回答

相關問題