Question

有谁能告诉我为什么这个jquery代码不起作用？在我看来，没有错。我比较了很多例子，看起来很相似。

<div id="full-view">
        <img src="" id="full-view-img" alt="#" />
    </div><!-- /#full-view -->
    $(document).ready(function(){

        $("img").click(function(){

            var image = $(this).attr('id') + ".png";

            $("#full-view").fadeIn(100, function(){

                $("#full-view-img").attr('src', image);

            });

        });

        $("#full-view").click(function(){

            $("#full-view").fadeOut(100);

        });


    });

感谢您的期待！

Answer 1

JavaScript属于<script>标记。
您提供的代码仅列出一张图片。如果单击该图像，则#full-view单击处理程序将隐藏该图像。

如果您没有发布真实代码，上述问题可能只是由于您的帖子中遗漏了。如果是这种情况，请执行以下操作：

编辑您的问题以包含足够正确的代码，以完全重现您所看到的行为。
在jsfiddle.com发布演示。

无论如何，这不是一个很棒的设计。不应以这种方式劫持id属性来存储相关数据。您可以创建自定义属性来执行此操作。我建议使用data-* attribute。这样，您就可以利用jQuery's .data() method：

<img src="img_thumb.png" data-full-src="img.png" />

var image = $(this).data("fullSrc");

编辑：查看your jsfiddle，或许您只是错过了一两个斜杠？你有：

var image = "data/images" + $(this).attr('id') + ".png";

images是否包含图片的目录？如果是这样，您将缺少目录和文件名之间的斜杠。它应该是：

var image = "data/images/" + $(this).attr('id') + ".png";

或者，更好的是，使用data-*属性：

<img src="img_thumb.png" data-full-src="img-1" />

.data()方法：

var image = "data/images/" + $(this).data('fullSrc') + ".png";

我在你的jsfiddle中注意到的另一件事是，你的一个可点击图片是jpg，但你在你的JavaScript中硬编码。如果全尺寸视图始终是png，那很好。但是将文件exstension包含在data-full-src属性中会更简单。

Answer 2

当我运行代码时，图像源被设置为“full-view-img.png”，但很快就会消失。

在你的fadeIn函数中，你可能需要调用“event.stopPropagation（）”来阻止“fadeOut”调用的发生。现在，当你点击（缺失）图像时，它会淡出，因为父div的“点击”功能被调用。 stopPropagation将阻止调用父div函数。如果您希望第二次单击时图像消失，可以在fadeIn函数中放置$（“＃fullView”）。click语句。

        $("#full-view").fadeIn(100, function(){
            event.stopPropagation();
            $("#full-view-img").attr('src', image);

        });

编辑：另外，根据评论，确保您的javascript在脚本标记内。

图像不会通过单击来更改其来源

2 个答案: