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插件来缩放图像，并且需要数据缩放图像属性。该插件为Elevate Zoom。

Answer 1

修改

你的«我忘了提及»会导致其他事情......
前面所说的仍然是正确的。

但是因为在该元素上实例化了一个插件，所以无论你改变什么都不会反映在插件实例中。

现在......插件正在创建新元素。这不是您正在展示的原始<img>。

查找"gallery"功能...如果出现问题，请回复一个新问题。

<小时/> 以前的回答

两者都在上升......

但是对于第二个，数据值，它没有反映在view-source中。就是这样。

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

Answer 2

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

根据.data()的jQuery文档。

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

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

是的，以及$（＆＃39;＃zoom_Photo＆＃39;）。attr（＆＃39; data-zoom-image＆＃39;，imgSrc），但源代码仍然显示以前的值。 data-zoom-image值触发该图像的缩放效果。还必须更新

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

jQuery切换Data Attribute的值

2 个答案: