jquery - 尝试更改动态创建的 的 data-zoom-image 属性

Question

我试图更改动态创建的标签的 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');
 });

因此，除了缩放保持旧的 data-zoom-image 值之外，一切都会发生变化。我正在使用 elevatezoom 插件。

Answer 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);
});