使用 jQuery 更新数据属性的值答案

【问题标题】：Updating the value of data attribute using jQuery使用 jQuery 更新数据属性的值
【发布时间】：2011-10-24 10:33:40
【问题描述】：

我有以下 HTML 代码：

<a class="toggle" href="#toggle">
    <img src="app/css/images/tock.png" alt="No" data-id="4" data-block="1">
</a>

我想使用 jQuery 更新 src 和 data-block 属性的值。我该怎么做？

更新：由于我有很多图像元素，我想使用data-id更新特定图像的值。

【问题讨论】：

标签： jquery

【解决方案1】：

$('.toggle img').data('block', 'something');
$('.toggle img').attr('src', 'something.jpg');

使用jQuery.data 和jQuery.attr。

为了便于理解，我将它们分别展示给您。

【讨论】：

你快到了：$('toggle img[data-id="4"]')
FWIW，我发现为了覆盖数据属性，您必须使用 .attr 而不是 .data。这很令人困惑，因为 jQuery 能够将数据附加到元素，但如果数据属性已经存在，则可能不会反映在 dom 中。
要说明我在上述评论中的意思，请参阅我的 jsfiddle。元素数据的控制台日志显示更新的值，但如果您查看元素的控制台日志，在其数据集中（或使用元素检查器查看），您将看到原始值。笏jsfiddle.net/joesepi/kycajL4e/2
我从不使用 .data，它总是坏掉。它根本看不到更新，它对我来说从来都不是很好。我总是使用 .attr
对于任何想知道@ugotchi 问题的人，答案是jQuery 的data 用于访问jQuery 添加到DOM 元素的“数据存储”。您可以使用它在 DOM 中的任何节点上存储您喜欢的任何数据。棘手的一点是，此数据存储从 DOM 节点上的 data 属性获取其初始值。因此，您可以使用data()读取数据属性，但如果您写入到data()，您只会写入数据存储，而不是原始属性.

【解决方案2】：

$('.toggle img').each(function(index) { 
    if($(this).attr('data-id') == '4')
    {
        $(this).attr('data-block', 'something');
        $(this).attr('src', 'something.jpg');
    }
});

或

$('.toggle img[data-id="4"]').attr('data-block', 'something');
$('.toggle img[data-id="4"]').attr('src', 'something.jpg');

【讨论】：

使用 jQuery.attr 而不是 jQuery.data，正如这个答案中所建议的那样，会导致某些浏览器出现错误。去过那里。
使用数据确实是一个好建议，但请记住，它不会修改原始的dom元素，这可能会导致其他依赖于dom变化的jquery出现问题。 peterbe.com/plog/data-and-attr-in-jquery

【解决方案3】：

我想更改 div 的宽度和高度。数据属性没有改变它。相反，我使用：

var size = $("#theme_photo_size").val().split("x");
$("#imageupload_img").width(size[0]);
$("#imageupload_img").attr("data-width", size[0]);
$("#imageupload_img").height(size[1]);
$("#imageupload_img").attr("data-height", size[1]);

小心：

$("#imageupload_img").data("height", size[1]); //did not work

没有设置

$("#imageupload_img").attr("data-height", size[1]); // yes it worked!

这已经设置好了。

【讨论】：

【解决方案4】：

$('.toggle img').data('block', 'something').attr('src', 'something.jpg');

【讨论】：

这不是我想要的，我已经更新了我的问题，请看一下。