尝试更改动态创建的 <img> 的 data-zoom-image 属性答案

【问题标题】：Trying to change the data-zoom-image attribute of an dynamically created <img>尝试更改动态创建的 <img> 的 data-zoom-image 属性
【发布时间】：2015-06-02 18:26:36
【问题描述】：

我正在尝试更改动态创建的标签的 data-zoom-image 属性，但它不成功是下面的代码：

这里是我创建标签的地方（这是一个 onclick 事件）：

$("#ImageBingingDiv").html('<img id="toZoom" style=" box-shadow: 3px 3px 1px #ccc;" src="'+id+'"   data-zoom-image="'+ id+'" width="'+widthD+'px" height="'+heightD+'" margin="10px"alt=""/>');
$("#ImageBingingDiv").css('height',heightD+12+'px').css('vertical-align','center');
$("#toZoom").on('click', function(){
       $("#toZoom").elevateZoom({

        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 500,
        lensFadeIn: 500,
        lensFadeOut: 500
});  
});

这是另一个点击它应该改变的地方：

$("#toZoom").fadeOut('fast', function () {
      $("#toZoom").attr('src', id);
      $("#toZoom").attr('data-zoom-image', id); 
      $("#toZoom").fadeIn('fast');
 });

所以除了缩放保持旧的数据缩放图像值外，一切都发生了变化。我正在使用 elevatezoom 插件。

【问题讨论】：

stackoverflow.com/a/35986402/5836381 也可以在这里找到答案

标签： jquery

【解决方案1】：

$("#ImageBingingDiv").html('<img id="toZoom"  style=" display:none;box-shadow:3px 7px 7px rgba(0, 0, 0,0.5);'+curs+' '+marginD+'"  src="./somepath/'+id+'.'+$("#"+id).data("typeim")+'"   data-zoom-image="./somepath/'+ id+'.'+filetype+'" width="'+widthD+'" height="'+heightD+'" alt=""/>'+infoDiv);
$("#ImageBingingDiv").css('height',heightD+12+'px').css('vertical-align','center');

if($("#"+id).data("hwtype")=="h"){
$("#toZoom").on('click', function(){
    if($(".zoomContainer").length == 0 && $( window ).height()<1010) {
     if($("#"+id).data("hwtype")=="w"){
             $("#toZoom").elevateZoom({
              zoomType: "lens",
              lensShape : "rechtangle",
              lensSize    : 200 

            });         
         }
     else{
      $("#toZoom").elevateZoom({
                zoomWindowFadeIn: 500,
                zoomWindowFadeOut: 500,
                lensFadeIn: 500,
                lensFadeOut: 500
            });         
     }
     $("#toZoom").off('click');
    }
}); 
setTimeout(function (){
 $("#toZoom").css("cursor", "url(./images/css/zoom1.png),auto"); 
     },100); 
}   

$("#toZoom").fadeIn(300);
});

【讨论】：

【解决方案2】：

更改属性不会做任何事情。您要做的是告诉插件实际为您更改缩放。

查看插件文档本身，我看不到您应该调用的任何特定方法，所以我建议您在更改缩放属性后尝试重新初始化插件，如下所示：

$("#toZoom").fadeOut('fast', function () {
      $(this)
        .attr('src',id)
        .attr('data-zoom-image',id)
        .elevateZoom({ /* your default zoom options here */ })
        .fadeIn('fast');
 });

【讨论】：

我试过了，但它并没有改变任何东西，正如我之前所说的那样，它显示了缩放但使用的是旧图片

【解决方案3】：

可能添加我的答案已经来不及了，但是今天我和你一样遇到了这个问题，我在this link找到了一个很酷很简单的解决方案：

打开 jquery.elevatezoom.js 文件
你可以在上面找到这一行：

self.imageSrc = self.$elem.data("zoom-image") ？ self.$elem.data("zoom-image") : self.$elem.attr("src");
用下面的代码替换它：

self.imageSrc = self.$elem.attr("src");
清除浏览器缓存，尽情享受吧。

注意：此解决方案仅在您的大图像和小图像是一个时才可用。

【讨论】：