jQuery切换Data Attribute的值

Question

我在更新数据属性的值时遇到了一些问题。 我有一张大图，下面有几个缩略图。我想要做的是，当单击任何缩略图时，它将更新大图像的图像源和数据属性值。到目前为止，我能够更改源但不能更改数据属性。我确实看到了一些类似的问题并尝试了解决方案，但到目前为止对我没有用。

这是我的代码：

HTML（我使用虚拟图像源只是为了解释我的代码）

<div class="bigImage">
  <img id="zoom_Photo" src="NormalSize.jpg" data-zoom-image="BigSize.jpg" />
</div>
<div id="additional-Photos">
    <img src="thumb1.jpg" data-pop="NormalSizeThumb1.jpg" />
    <img src="thumb2.jpg" data-pop="NormalSizeThumb2.jpg" />
    <img src="thumb3.jpg" data-pop="NormalSizeThumb3.jpg" />
</div>
         // This Script Triggers the Zoom Effect on Big Image
         <script>
            $('#zoom_Photo').elevateZoom({
              zoomType: "inner",
              cursor: "crosshair",
              zoomWindowFadeIn: 500,
              zoomWindowFadeOut: 750
           }); 
        </script>

jQuery

$('#additional-Photos .product-thumb').click(function(){
    var imgSrc = $(this).data('pop');
    $('#zoom_Photo').attr('src',imgSrc);
    $('#zoom_Photo').data('zoom-image',imgSrc);
});

图片 ID #zoom_Photo 的图片来源在点击时发生变化，但其数据属性 data-zoom-image 未更新。

我正在使用 jQuery 插件来缩放图像，并且它需要 data-zoom-image 属性。插件是Elevate Zoom。

Answer 1

编辑

你的«我忘了说»会导致其他事情......
前面说的还是对的。

但由于在该元素上实例化了一个插件，因此无论您对它进行什么更改都不会反映在插件实例中。

现在...插件正在创建新元素。显示的不是你原来的<img>。

查找"gallery" 功能...如果有问题，请返回新问题。

---

上一个答案

两者都在更新......

但是对于第二个数据值，它并没有反映在视图源中。就是这样。

如果您在更新后尝试console.log($('#zoom_Photo').data('zoom-image'));，您将获得正确的值。要让它反映在视图源中，您必须更新属性本身...

Answer 2

我在更新数据属性的值时遇到了一些问题。

根据.data() 的 jQuery 文档。

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

因此，DOM 中的属性从不 使用此方法更改。如果您需要更改属性，请使用.attr()。

是的，这也是 $('#zoom_Photo').attr('data-zoom-image', imgSrc) 但源代码仍显示以前的值。 data-zoom-image 值触发该图像的缩放效果。也必须更新

是的，因为源代码从不改变，它是文档的来源，而不是当前值。