Question

我对jquery一无所知所以是的。我只是想这样当你点击“image-url”div时，他们将“src：component”设置为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 &amp<div></div>&amp; 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>

Answer 1

$('.image-url').on('click', function() {...});

您应该阅读jQuery selectors.

修改
您的示例中已有一个有效的选择器。它不起作用吗？也许它找不到你的jQuery库？

Answer 2

您想要为您单击的图像获取属性“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);
});

快乐的编码！：）

如何将click事件附加到分配给某个类名的所有div？

2 个答案: