jQuery单击图像没有任何作用

Question

我试图让一些jQuery代码在单击图像时执行，但我的问题是，仅在单击图像时才执行。 我发现我的问题是我将所有图像放置在名为photo的div中，且具有固定的宽度和高度。 图像被约束为适合div的内部，而不会使图像偏离其原始约束。 该图像将不会填充div，因此当我单击图像外部时，我将单击div而不是图像。 我如何才能在下面更改代码，使其仅在单击photo div中的图像时才执行？ 我是jQuery的新手，所以如果这是一个非常简单的修复程序，请原谅我的问题。

$("body").click(function(event) {
    var $target = $(event.target).attr('class');
    var $idOfPhoto = event.target.id;
    if ($target == "photo") {
$('#lightBox').lightbox_me({
    centered:true,
    onLoad:function() {
        $('#lightBox').empty();
        $('#lightBox').prepend('<img src="/Victoria/images/photoGallery/' + $idOfPhoto + '" />');
    }
});

}
});

这是完整的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Victoria Mendiola</title>
        <link rel="stylesheet" href="css/style.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="css/jquery.mousewheel.js"></script>
        <script type="text/javascript" src="css/jquery.jscrollpane.min.js"></script>
        <script src="/resources/library/jquery.lightbox_me.js"></script>
        <script src="/resources/library/jquery.browser.js"></script>
        <script src="jquery.cycle.all.js"></script>
    </head>

<body>
    <div id="lightBox">

    </div>
    <div class="container">
        <div class="logo">
        <img class="victoriaLogo" src="images/Victoria-logo.png" />
        </div>
        <div class="navigation">
            <a class="navText" href="index.php">Home</a>
            <a class="navText" href="gallery.php">Gallery</a>
            <a class="navText" href="#about">About</a>
            <a class="navText" href="contact.php">Contact</a>
        </div>
    <script>
        $(function()
{
    $('.galleryContainer').jScrollPane();
});
    </script>
    <div class="galleryContainer">
<?php
require 'DB.php';

    try{      
    $stmt ='SELECT * FROM victoria';
    foreach ($conn->query($stmt) as $row)
        {
        echo ('<div class="photo" id="' . $row['name'] . '"> 
        <img src="images/photoGallery/thumbnails/' . $row['name'] . '" /> </div> </a>');

        }
    }  catch (PDOException $e){
        echo 'Connection failed: ' . $e->getMessage();
    }


?>
    </div>

    <script>
        $("body").click(function(event) {
            var $target = $(event.target).attr('class');
            var $idOfPhoto = event.target.id;
            if ($target == "photo") {
        $('#lightBox').lightbox_me({
            centered:true,
            onLoad:function() {
                $('#lightBox').empty();
                $('#lightBox').prepend('<img src="/Victoria/images/photoGallery/' + $idOfPhoto + '" />');
            }
        });

        }
        });
</script>
</div>
</body>

</html>

Answer 1

$('.photo').click(function() {
  $('#lightBox').lightbox_me({
    centered:true,
    onLoad:function() {
      $('#lightBox').empty();
      $('#lightBox').prepend('<img src="/Victoria/images/photoGallery/' + $idOfPhoto + '" />');
    }
  });
});

jQuery单击图像没有任何作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-09-16 01:55:09

jQuery单击图像没有任何作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-09-16 01:55:09

解决方案1
1 已采纳 2013-09-16 01:55:09