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;         

    });

由于这是实时更改图像，因此缩放不会调整为正在更新的数据属性，这意味着它仍会呈现初始图像的缩放，而不是更新的图像（来自数据attr）。

此时如何强制更新？

修改

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

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

像魔术一样工作。

Answer 1

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

运行\\n时，将读取该属性，并且生成的eventlistener不会重新验证这些属性。执行该命令后更改这些属性不会反映在插件中。

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

简短回答：不可能

Answer 2

如果您的缩放插件使用jQuery.data()处理附加数据，则无法看到您对数据属性所做的更改。 jQuery.data()在首次访问时从DOM读取数据属性，在第一次访问时读取。之后，缓存属性。来自jQuery docs：

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

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

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

Javascript / jQuery插件问题（不更新数据属性）

2 个答案: