Javascript/jQuery插件问题(未更新数据属性）

Javascript/jQuery plugin issue (not updating data attribute)

本文关键字：更新 数据属性 问题 jQuery 插件 Javascript      更新时间：2023-09-26

在开始之前，我想道歉，因为我不每天使用jQuery，也不知道它的工作原理。

我一直很难使用我在正文底部包含的一个jQuery插件。问题是实时更新DOM数据属性。脚本看起来像：

$('#product-image').elevateZoom(
    { zoomType : "inner", cursor: "crosshair"}
);

我使用html:中的数据属性

<div id="product-image" data-image="/img/sample/17e.jpg" data-zoom-image="/img/sample/17e.jpg" class=" product grid grid-halfhalf timestwo">
<img  src="/img/sample/17e.jpg" alt="">
</div>

问题是，当我点击缩略图时，它会更新这些数据属性，同样：

thumb.addEventListener('click',function() {
                var imgParent = DOM.getId('product-image'); // <-- helper obj
                var img = imgParent.querySelector('img');
                var src = img.getAttribute('src');
                img.src = this.src;
                // imgParent.dataset.image = this.src; <-- tried this as well
                // imgParent.dataset.zoomImage = this.src; <-- tried this as well
                imgParent.setAttribute('data-image', this.src);
                imgParent.setAttribute('data-zoom-image', this.src);
                this.src = src;         
    });

由于这是实时变化的图像，缩放不会根据更新的数据属性进行调整，这意味着它仍然渲染初始图像的缩放，而不是更新后的缩放（来自数据属性）。

此时如何强制更新？

编辑：

我想明白了。要重新获取数据属性，可能必须删除并克隆节点元素，或者取消绑定并删除数据：

$('#product-image').unbind().removeData();

就像魔术一样。

如果您的缩放插件使用jQuery.data()处理附加数据，它将看不到您对数据属性所做的更改。jQuery.data()在第一次访问时从DOM读取数据属性，并且在第一次时仅。之后，属性将被缓存。来自jQuery文档：

数据属性在第一次访问数据属性时被拉入，然后不再被访问或更改（然后所有数据值都存储在jQuery内部）。

我也遇到过同样的问题，jQuery没有读取更新的属性，在我的一个插件中就是这样处理的。简而言之，jQuery无法在第一次访问后从DOM中读取数据属性。但是您可以通过更新jQuery数据对象来解决这个问题，而不是更新节点的数据属性，比如：

if ( $.hasData( imgParent ) ) {
    $( imgParent ).data( {
        image: this.src,
        zoomImage: this.src,
     } );
}

AFAIK问题是使用的插件，不必对jQuery本身做任何事情。

运行$('#product-image').elevateZoom(...)时，将读取属性，并且生成的事件侦听器不会重新验证这些属性。在执行该命令后更改这些属性不会反映在插件中。

https://github.com/elevateweb/elevatezoom/blob/master/jquery.elevatezoom.js#L44

简短的回答：这是不可能的

相关文章：