Question

我之前曾经问过这个问题，尽管理论上问题已经解决，但它仍然无法在我的实际网站中使用。

原始问题的详情： Replace a featured image's src with the src of the image clicked on

Jquery我正在使用：

$(".galleryimg").click(function(){
    var r1 = $(this).attr("src");
    $('#featured-image').attr("src", r1);
    });

此代码应该在其上运行的网站上的页面： http://www.hoosiergames.org/textquest.html

我目前正在使用这个jquery代码内联在此页面的标题和链接的外部jquery文件中。似乎都没有做到这一点，尽管事实上我还链接了最新的jquery库页面和页面上的其他jquery工作得很好。

我们三个人已经看过这个但仍然没有找到问题。这里希望别人能发现它。

在此先感谢您的帮助，在这个上撕下我的头发。

Answer 1

您需要将上面的jQuery代码包装在：

中

$(document).ready(function(){
  // your code
});

这将确保在绘制文档标记后运行。

Answer 2

(function() {
    $(function() { // Document Ready
        var $featuredImage;

        $('.galleryimg').click(function() {
            $featuredImage = $featuredImage || $('#featured-image');

            $featuredImage.prop('src', this.src);
        });
    });
}());

这里的概念是首先确保我们的所有代码都在自己的范围内运行，而不是污染全局对象（窗口）。然后我们需要确保文档准备就绪，以便图库图像可以实际绑定到它的点击事件，否则点击甚至不会被绑定。

点击图库图片后，我们会找到精选图片，但如果已经找到则不会找到;这将加速计算，因为研究DOM（所有元素）可能很慢。然后我们得到点击图像的src（通过prop而不是attr - 弃用），然后将特色图像的src更新为它。

不需要将gallery图像元素包装在jQuery对象中（因为它需要时间），因为我们只是从它中检索src属性，这很容易犯罪。

关键问题 虽然我可能已经改变很多，但纯粹是为了清理和进一步学习。原始代码的核心问题是，当您通过jQuery $('find me!!!)进行DOM搜索时，它必须已经在页面中。由于您的代码位于HEAD中，因此您的页面已设置为呈现您要查找的元素。通过添加jQuery的DOM Ready函数，一旦页面包含所有元素（在原始请求中发送），它就会运行代码。

Answer 3

你肯定可以像@ tony.leo所指出的那样使用DOM，等到DOM全部设置好才能激活你的代码。如果仅在包含图形（图像）的整个页面已满载时触发此代码非常重要，那么您将使用$(window).load(fn)，如下所示：

$(window).load(function() {
    $(".galleryimg").click(function(){
        var r1 = $(this).attr("src");
        $('#featured-image').attr("src", r1);
    });
});

Answer 4

首先，尝试将你的jquery放在身体标签之后。您可以在头部包含.js文件本身，但是在主体标记之后将脚本放在标记之间。

通过这种方式，浏览器将加载文档正文并识别图像。

并且，以防万一，将document.ready函数包装在您的代码周围：

$(document).ready(function(){
  $(".galleryimg").click(function(){
    var r1 = $(this).attr("src");
    $('#featured-image').attr("src", r1);
    });
});

祝你好运！

使用jquery将图像的src更改为单击的图像的src

4 个答案: