Question

我正在使用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>

Answer 1

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

尝试：

var theImage = $('img',this)[0].attr('src');

Answer 2

  jQuery(".outerdiv").add("innerdiv").add("img").click(function (){
    var target = $(this);
    var src = target.attr("src") || target.find("img").attr("src");
  });

当我点击外部div时，如何选择嵌套在2个div中的图像？

2 个答案: