0

我正在使用 jquery，我想找到我单击的图像的 src，但我也希望能够单击 outerdiv 而不仅仅是单击图像本身。我的代码都在这里，可以复制并粘贴到编辑器中。这是简化的代码，但我的项目从数据库生成标签并使用 PHP 输出到网页。如果我单击图像，它工作正常，但如果我单击 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>
4

2 回答 2

0

问题是它this没有src属性，因为this它不是图像。您需要在外部 div 中选择图像。

尝试：

var theImage = $('img',this)[0].attr('src');
于 2012-06-15T00:01:35.787 回答
0 
  jQuery(".outerdiv").add("innerdiv").add("img").click(function (){
    var target = $(this);
    var src = target.attr("src") || target.find("img").attr("src");
  });
于 2012-06-15T00:02:30.053 回答