Как выбрать изображение, вложенное внутри 2 divs, когда я нажимаю на внешний div?

Я использую jquery, и я хотел бы найти src изображения, которое я нажимаю, но я также хотел бы иметь возможность щелкнуть по внешнему div, а не просто щелкнуть по самому изображению. Мой код здесь и может быть скопирован и вставлен в редактор. Это упрощенный код, но мой проект генерирует теги из базы данных и выводит их на веб-страницу с помощью PHP. Он отлично работает, если я нажимаю на изображение, но не, если я нажимаю на innerdiv или outerdiv. Любая помощь будет принята с благодарностью, я просто начинаю использовать jquery, Спасибо.Как выбрать изображение, вложенное внутри 2 divs, когда я нажимаю на внешний div?

<!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>

источник

2012-06-14 Keith

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

источник

2012-06-15 00:02:30 nbsp

Спасибо, теперь отлично работает !!! Единственное, что мне также нужно было добавить, это вернуть false; в конце функции, которая заставляет окно предупреждения появляться дважды, когда нажимается текущее изображение. Спасибо за помощь всем! – Keith

Проблема заключается в том, что this не имеет атрибута src, потому что this не является изображением. Вам нужно выбрать изображение внутри div.

Try:

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

источник

2012-06-15 00:01:35 Flimzy

Как выбрать изображение, вложенное внутри 2 divs, когда я нажимаю на внешний div?

ответ

Смежные вопросы