0

谁能告诉我为什么这个 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);

        });


    });

谢谢你的期待！

4

2 回答 2

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

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

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

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

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

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

编辑： 看看你的 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。如果全尺寸视图始终是 png，那很好。但是在data-full-src属性中包含文件扩展名会更简单。

于 2013-07-29T21:23:52.557 回答
0

当我运行代码时，图像源设置为“full-view-img.png”，但几乎立即消失。

在您的fadeIn 函数中，您可能需要调用“event.stopPropagation()”来防止发生“fadeOut”调用。现在，当您单击（丢失的）图像时，它只是淡出，因为调用了父 div 的“单击”函数。stopPropagation 将阻止调用父 div 函数。如果您希望图像在第二次单击时消失，您可以将 $("#fullView").click 语句放在 fadeIn 函数中。

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

        });

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

于 2013-07-29T21:17:45.113 回答