gpt4 book ai didi

javascript - jQuery - 在新图像上运行函数

转载 作者:搜寻专家 更新时间:2023-11-01 05:27:14 24 4
gpt4 key购买 nike

我是一个 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;
});
});

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

最佳答案

嘿嘿!我自己解决了...

事实证明,如果我完全删除包含的 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;
});
});

关于javascript - jQuery - 在新图像上运行函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/132750/

24 4 0
文章推荐: javascript - 表单和 jQuery
文章推荐: javascript - 如何在 IE6 中使用带有原型(prototype)的元素添加 ?