Jquery 单击显示特定图像

我正在尝试在单击图片时显示一个div。此div应仅包含较大的已单击图片。但是我不能让它工作。我尝试过很多不同的事情，现在我希望有人能帮助我或者给我一些建议

首先，我有我的html图像，它是在php while循环中生成的：

<img src='".$picsarray[$picsfrom]."' class='gallerythumbnail'>

最后，我尝试编写了一些Jquery代码：

<script>
$(document).ready(function() {
    $(\"#gallerythumbnail\").click(function( event ) {
        $(\".showimagediv\").show();
    });
});
</script>

我不知道如何在div中使用它，单击图像时显示

我希望有人能理解我的意思，并能在正确的方向上帮助我

然后我有了我想要在点击前一张图像时显示的div的css

如果您所说的是正确的，上一个是图像，这意味着DIV是

。下一个（）

在CSS中为DIV使用类：

.showimagediv {

jQuery

$(function() { // DOM ready shorthand

    $(".gallerythumbnail").click(function() {
          $(this).next('.showimagediv').show(); // or you want .toggle() ?
    });

});

从缩略图中获取源，并创建一个新图像，插入到您试图显示单击图像的DIV中：

$(document).ready(function() {
    $('.gallerythumbnail').on('click', function() {
        var img = $('<img />', {
                      src     : this.src,
                      'class' : 'fullImage'
                  });

        $('.showimagediv').html(img).show();
    });
});

$（文档）.ready（函数（）{
$（'.gallerythumbnail'）。在（'click'，function（）上{
var img=$（“首先，您的CSS代码
#showmagediv
#代表ID属性。
jQuery代码使用
.showimagediv
表示类属性

所以，首先要确定showimagediv是ID还是DIV，然后纠正CSS或jQuery

然后，将您的img标签放入一个标签中，使其成为“可点击的”。href=“#”表示您点击它时不会发生任何事情

<a href="#" id="image">
    <img src='".$picsarray[$picsfrom]."' class='gallerythumbnail'>
</a>

因此，当您单击链接内的图像时，它会将显示值从none更改为block。这不会切换，它只显示一次，不会再次隐藏

如果需要切换，则需要在jQuery函数中进行控制，如下所示：

$(function() {
    $("a#image").click(function() {
        var actualDivDisplay = $("div.showimagediv").css("display");
        var newDivDisplay = "";

        if (actualDivDisplay == "none") {
            newDivDisplay = "block";
        } else {
            newDivDisplay = "none";
        }

        $("div.showimagediv").css("display", newDivDisplay);
    });
});

为什么要转义jQuery？您的CSS有ID
#showimagediv
（如果您有更多，这是错误的）---而您使用CLASS
$（“.showimagediv”）.show（）在您的jQueryoh中，这是因为它是php脚本的一部分。这是错误的吗？我可以看到我的问题被否决了，我写错了什么吗？另外，没有必要逃避
\"
然后你需要解释DIV的确切位置，是一个还是多个等。如果你想要快速准确的回答，请更加精确我不知道为什么它被否决了，可能是因为你错过了一些细节…如返回的图像URL和你感兴趣的部分的外观等etc@user68621-没问题！有可能吗在div中填充图像时调整图像大小？当前，在div上显示的图像非常小，基本上是缩略图的大小。@AnitaMathew-当然，类
fullImage
被添加到完整图像中，所以只需使用CSS调整其大小即可。@adeneo您能看看这个问题吗：。图像正在失去其类别放大时的亮度…非常模糊
<a href="#" id="image">
    <img src='".$picsarray[$picsfrom]."' class='gallerythumbnail'>
</a>

$(function() {
    $("a#image").click(function() {
        $("div.showimagediv").css("display", "block");
    });
});

$(function() {
    $("a#image").click(function() {
        var actualDivDisplay = $("div.showimagediv").css("display");
        var newDivDisplay = "";

        if (actualDivDisplay == "none") {
            newDivDisplay = "block";
        } else {
            newDivDisplay = "none";
        }

        $("div.showimagediv").css("display", newDivDisplay);
    });
});