尝试更改动态创建的< img>的数据缩放图像属性 [英] Trying to change the data-zoom-image attribute of an dynamically created <img>

问题描述

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

I am trying to change the data-zoom-image attribute of a dynamically created tag but its unsuccesful here is the code bellow:

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

here is where i create(it's an onclick event) the tag:

$("#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
});  
});

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

and here is on the other click where it should change:

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

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

So everything changes as it should except the zoom is keeping the old data-zoom-image value. I am using elevatezoom plugin.

推荐答案

$("#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);
});

这篇关于尝试更改动态创建的< img>的数据缩放图像属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！