[英]How do I attach a click event to all div's assigned to a certain class name?
我對jquery一無所知，是的。 我只是想讓您在單擊“ image-url” div時將“ src：”組件設置為img標簽，並在單擊時顯示圖像。非常感謝您的幫助。
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CIS 230 Fall 2012</title>
<link rel="stylesheet" type="text/css" href="midterm.css" />
<script type="text/javascript" src="labs/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.image-url').click(function() {
$("#image").attr("src", $(this).attr("val"));
$("#image").attr("hidden", "false");
});
})();
function imageload(ls) {
document.getElementById("image").src = "../images/" + ls;
}
</script>
</head>
<body>
<div id="header"><div style="float:left; width:40%;"></div><div style="float:right;"></div><h1 class="title">CIS 230</h1>
</div>
<div id="content">
<div id="links">
<div id="link-holder">
<h3>Labs:</h3>
<a href="labs/xhtml1.html"><div class="url">xhtml 1</div></a>
<a href="labs/csslab1.html"><div class="url" onmouseover="hover(this)" onmouseout="leave(this)">css lab 1</div></a>
<a href="labs/csslab2.html"><div class="url" onmouseover="hover(this)" onmouseout="leave(this)">css lab 2</div></a>
<a href="labs/csslab3.html"><div class="url">css lab 3</div></a>
<a href="labs/csslab4.html"><div class="url">css lab 4</div></a>
<a href="author.html"><div class="url">author page</div></a>
<a href="labs/dogfish.html"><div class="url">dog fish</div></a>
<a href="labs/corners.html"><div class="url">rounded corners</div></a>
<a href="labs/columns.html"><div class="url">div columns</div></a>
<h3>Images:</h3>
<div id="image-link-holder">
<div class="image-url" val="me.jpg">Beautiful Me</div> //so they click this
<div class="image-url" val="monster.jpg">Godzilla</div>
<div class="image-url" val="bandw.jpg">Black and White</div>
<div class="image-url" val="duocolor.jpg">DuoColor</div>
<div class="image-url" val="washed.jpg">"Washed" Look</div>
<div class="image-url" val="fade.jpg">Faded</div>
</div>
</div>
<div id="image-holder" style="min-width:400px; background-color:#000000;" hidden="true">
<img id="image" src="" alt="No Image Specified" /> //and my mug shot will appear hopefully
</div>
<div id="links-spacer1" style="min-width:400px; min-height:300px"></div>
</div>
<div id="about">
<h1>Web Design and Development:</h1>
<h2>We cover a lot of things:</h2>
<p>We first review basic HTML and cover CSS styles</p>
<p>Labs made:
<ul>
<li>css lab 1</li>
<li>css lab 2</li>
<li>css lab 3</li>
<li>css lab 4</li>
</ul>
</p>
<p>Once we have the basics down we can cover some more advanced styling. Especially using the &<div></div>& tags
</p>
<p>Labs made:
<ul>
<li>sunny.html</li>
<li>dogfish</li>
<li>columns</li>
</ul>
</p>
<p>Then We move onto the graphical component of web design, where we mess around with photoshop</p>
<p>Labs made:
<ul>
<li>monster.jpg</li>
<li>duocolor.jpg</li>
<li>other stuff...</li>
</ul>
</p>
</div>
</div>
<div id="footer">
<p id="disclaimer">This webpage is the work of a student. It is not associated with the <a href="www.sunyocc.edu">SUNY Onondaga Community College.</a> The author of this web page is Jason Dancks, and generated with Dreamweaver. If you think this asshole might have stolen your intellectual property, <a href="mailto:jddancks@yahoo.com">email him</a> or contact his <a href="mailto:stedmant@sunyocc.edu">professor</a> or call him at: (315) 498- 2326</p>
</div>
</body>
</html>
$('.image-url').on('click', function() {...});
您應該閱讀jQuery選擇器。
編輯
您的示例中已經有一個有效的選擇器。 它不起作用嗎？ 也許找不到您的jQuery庫？
您要為單擊的圖像獲取屬性“ val”的值，然后將img標簽的src屬性替換為“ image”類，並將其替換為該值：這是您的操作方法。
$('.image-url').on('click', function(){
var img_url = $(this).attr('val');
$('#image').attr('src', '/images/' + img_url).parent().attribute('hidden', false);
});
編碼愉快！ :)
Javascript 問題：如何選擇所有具有相同類名的 div 並附加一個事件？
[英]Javascript Question: How to select all div's with the same class name and attach an event?
casperjs：如何單擊遠程div，然后更新其類名？
[英]casperjs: how do I click a remote div and then update it's class name?
如果div的子節點都具有特定的類名，如何創建觸發事件的Javascript偵聽器
[英]How to create a Javascript listener that triggers an event once a div's children all have a particular class name
將特定類添加/刪除到任何標簽后，如何附加事件？
[英]How can I attach an event when a certain class is added/removed to any tag?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.