jQuery切换数据属性的值

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

这是我的密码：

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

单击时，图像ID#zoom_Photo的图像源正在更改，但其数据属性data zoom image未更新

我使用jQuery插件来缩放图像，它需要数据缩放图像。插件是。

编辑

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

但是，由于该元素上实例化了一个插件，所以无论您对它做了什么更改，都不会反映在插件实例中

现在。。。插件正在创建新元素。显示的不是您原来的

查找功能。。。如果有问题，请回答一个新问题

---

先前的答案

两人都在兴奋

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

如果您尝试使用

console.log（$（'zoom\u Photo'）.data（'zoom-image'）更新后，您将获得正确的值。要使其反映在视图源中，您必须更新属性本身…
编辑

你的«我忘了提»导致了其他事情……

前面所说的仍然是正确的

但是，由于该元素上实例化了一个插件，所以无论您对它做了什么更改，都不会反映在插件实例中

现在。。。插件正在创建新元素。显示的不是您原来的

查找功能。。。如果有问题，请回答一个新问题


先前的答案

两人都在兴奋

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

如果您尝试使用
console.log（$（'zoom\u Photo'）.data（'zoom-image'）更新后，您将获得正确的值。要使其反映在视图源中，您必须更新属性本身

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

根据的jQuery文档

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

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

是的，这也是$（'zoom_Photo'）.attr（'data-zoom-image'，imgSrc），但是源代码仍然显示前面的值。“数据缩放图像”值触发该图像的缩放效果。这也需要更新

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

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

根据的jQuery文档

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

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

是的，这也是$（'zoom_Photo'）.attr（'data-zoom-image'，imgSrc），但是源代码仍然显示前面的值。“数据缩放图像”值触发该图像的缩放效果。这也需要更新

是的，因为源代码从不更改，它是文档的源代码，而不是当前值。
与您对
src
属性所做的相同。但这里重要的是。。。就是价值。属性只是通过HTML标记在加载时提供的。仅更新属性可能不会更新值。。。由于对于DOM，对象已被解析。已尝试使用此
$（'zoom_Photo'）.attr（'zoom-image'，imgSrc）
更新数据属性，但未起作用。这将是：
$（'zoom_Photo'）.attr（'data-zoom-image'，imgSrc）
。。。但请注意我之前的评论；）是的，这也是
$（'#zoom_Photo'）.attr（'data-zoom-image'，imgSrc）
，但是源代码仍然显示以前的值。“数据缩放图像”值触发该图像的缩放效果。必须以与
src
属性相同的方式更新该属性。但这里重要的是。。。就是价值。属性只是通过HTML标记在加载时提供的。仅更新属性可能不会更新值。。。由于对于DOM，对象已被解析。已尝试使用此
$（'zoom_Photo'）.attr（'zoom-image'，imgSrc）
更新数据属性，但未起作用。这将是：
$（'zoom_Photo'）.attr（'data-zoom-image'，imgSrc）
。。。但请注意我之前的评论；）是的，这也是
$（'#zoom_Photo'）.attr（'data-zoom-image'，imgSrc）
，但是源代码仍然显示以前的值。“数据缩放图像”值触发该图像的缩放效果。在本例中，
data pop
之后缺少
=
，这也需要更新。Yes@René这是我的打字错误。很抱歉，在本例中，
data pop
之后缺少
=
，Yes@René这是我的键入错误。很抱歉，我如何告诉插件使用新值？它不会。程序员没有这个功能。我看到的唯一解决方案是删除t
<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>

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