个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我对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 selectors.
编辑
您的示例中已经有一个有效的选择器。是不是不起作用？也许它找不到您的 jQuery 库？
关于javascript - 如何将点击事件附加到分配给特定类名称的所有 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12867235/
25
4
0
我是一名优秀的程序员,十分优秀！