jQuery - 在新图像上运行函数

Posted 2023-05-08

技术标签:

【中文标题】jQuery - 在新图像上运行函数【英文标题】：jQuery - running a function on a new image 【发布时间】：2010-09-13 01:30:33 【问题描述】：

我是 jQuery 新手，所以这个问题的答案可能很简单：

我有一张图片，我想用它做几件事。当用户单击“缩放”图标时，我正在运行“图像工具”插件 (http://code.google.com/p/jquery-imagetool/) 以加载更大版本的图像。该插件会在图像周围创建一个新的 div，并允许用户平移。

当用户点击替代图片时，我将删除旧图片并加载新图片。

当用户单击替代图像，然后单击缩放按钮时出现问题 - imagetool 插件创建了新的 div，但图像出现在它之后...

代码如下：

// Product Zoom (jQuery)
$(document).ready(function()
$("#productZoom").click(function() 

    // Set new image src
    var imageSrc = $("#productZoom").attr("href");
    $("#productImage").attr('src', imageSrc);   

    // Run the imagetool plugin on the image
    $(function() 
        $("#productImage").imagetool(
            viewportWidth: 300,
            viewportHeight: 300,
            topX: 150,
            topY: 150,
            bottomX: 450,
            bottomY: 450
        );
    );
    return false;
);
);


// Alternative product photos (jQuery)
$(document).ready(function()
$(".altPhoto").click(function() 

    $('#productImageDiv div.viewport').remove();
    $('#productImage').remove();

    // Set new image src
    var altImageSrc = $(this).attr("href");

    $("#productZoom").attr('href', altImageSrc);

    var img = new Image();
    $(img).load(function () 
        $(this).hide();
        $('#productImageDiv').append(this);
        $(this).fadeIn();
    ).error(function () 
        // notify the user that the image could not be loaded
    ).attr(
        src: altImageSrc,
        id: "productImage"
        );

    return false;       
);
);

在我看来，imagetool 插件一旦被替换为新图像就再也看不到#productImage 图像了……所以我认为这与绑定有关？如因为页面加载后新图像添加到dom中，iamgetool插件无法再正确使用它......是这样吗？如果是这样，有什么想法如何处理它？

【问题讨论】：

【参考方案1】：

嘿！我自己整理好了...

如果我完全删除包含的 div，然后用 .html 重写它，imagetool 插件会再次识别它。

为感兴趣的人修改代码：

$(document).ready(function()

  // Product Zoom (jQuery)
  $("#productZoom").click(function() 

    $('#productImage').remove();
    $('#productImageDiv').html('<img src="" id="productImage">');

    // Set new image src
    var imageSrc = $("#productZoom").attr("href");
    $("#productImage").attr('src', imageSrc);   

    // Run the imagetool plugin on the image
    $(function() 
        $("#productImage").imagetool(
            viewportWidth: 300,
            viewportHeight: 300,
            topX: 150,
            topY: 150,
            bottomX: 450,
            bottomY: 450
        );
    );

    return false;
  );


  // Alternative product photos (jQuery)
  $(".altPhoto").click(function() 

    $('#productImageDiv div.viewport').remove();
    $('#productImage').remove();

    // Set new image src
    var altImageSrc = $(this).attr("href");

    // Set new image Zoom link (from the ID... is that messy?)
    var altZoomLink = $(this).attr("id");

    $("#productZoom").attr('href', altZoomLink);

    var img = new Image();
    $(img).load(function () 
        $(this).hide();
        $('#productImageDiv').append(this);
        $(this).fadeIn();
    ).error(function () 
        // notify the user that the image could not be loaded
    ).attr(
        src: altImageSrc,
        id: "productImage"
        );

    return false;       
  );
);

【讨论】：

【参考方案2】：

您可以尝试将 productZoom.click() 函数抽象为命名函数，然后在更改为备用图像后重新绑定它。类似的东西：

// Product Zoom (jQuery)
$(document).ready(function()
$("#productZoom").click(bindZoom);

// Alternative product photos (jQuery)
$(".altPhoto").click(function() 

        $('#productImageDiv div.viewport').remove();
        $('#productImage').remove();

        // Set new image src
        var altImageSrc = $(this).attr("href");

        $("#productZoom").attr('href', altImageSrc);

        var img = new Image();
    $(img).load(function () 
                $(this).hide();
        $('#productImageDiv').append(this);
        $(this).fadeIn();
    ).error(function () 
        // notify the user that the image could not be loaded
    ).attr(
                src: altImageSrc,
                id: "productImage"
                );
        $("#productZoom").click(bindZoom);
        return false;

);  
);

function bindZoom() 
        // Set new image src
        var imageSrc = $("#productZoom").attr("href");
        $("#productImage").attr('src', imageSrc);       

        // Run the imagetool plugin on the image
        $(function() 
                $("#productImage").imagetool(
                        viewportWidth: 300,
                        viewportHeight: 300,
                        topX: 150,
                        topY: 150,
                        bottomX: 450,
                        bottomY: 450
                );
        );
        return false;

另外，将你的两个 ready() 块滚动到同一个块中。

【讨论】：

谢谢，但这也不起作用......做了同样的事情，虽然可能是做我最初做的更好的方法。 ;)【参考方案3】：

首先，我有一个问题，.altPhoto 链接还是图片？因为如果它的图像那么这条线是错误的