Javascript/jQuery 插件问题(不更新数据属性)

Question

在开始之前，我想道歉，因为我不每天使用 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;         

    });

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

此时如何强制更新？

编辑:

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

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

像魔法一样工作。

Answer 1

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

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

我也遇到了同样的问题，jQuery 不读取更新的属性，并处理了它 like this在我的一个插件中。简而言之，没有办法让 jQuery 在第一次访问后从 DOM 中读取数据属性。但是您可以通过更新 jQuery 数据对象而不是节点的数据属性来解决这个问题，如下所示:

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