jqueryを使用していて、クリックした画像のsrcを見つけたいのですが、画像自体をクリックするだけでなく、outerdivもクリックできるようにしたいと思います。私のコードはすべてここにあり、コピーしてエディターに貼り付けることができます。これは単純化されたコードですが、私のプロジェクトはデータベースからタグを生成し、PHPを使用してWebページに出力します。画像をクリックすると正常に機能しますが、innerdivまたはouterdivをクリックすると機能しません。どんな助けでも大歓迎です、私はちょうどjqueryを使い始めています、ありがとう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery Select src</title>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".outerdiv img").click(function(){ //output variable 'theImage' when outerdiv is clicked
var theImage = $(this).attr('src');
alert("The image source is: " + theImage);
});
}); //end of document ready function
</script>
<style>
.outerdiv {width: 300px; height: 200px; border: thin solid #000000;}
.innerdiv {width: 160px; height: 160px; border: thin solid #0099FF;}
.innerdiv img {width: 120px; height: 120px; border: thin solid #FF3300;}
</style>
</head>
<body>
<div class="outerdiv">outerdiv
<div class="innerdiv">innerdiv
<img src="image1.jpg">
</div><!--/innerdiv-->
</div><!--/outerdiv-->
<div class="outerdiv">outerdiv
<div class="innerdiv">innerdiv
<img src="image2.jpg">
</div><!--/innerdiv-->
</div><!--/outerdiv-->
<div class="outerdiv">outerdiv
<div class="innerdiv">innerdiv
<img src="image3.jpg">
</div><!--/innerdiv-->
</div><!--/outerdiv-->
</body>
</html>