Question

我无法通过jQuery更新数据值，我发现了类似的问题，但在这种情况下没有帮助。

我的数据名为color，其值为red，我只想将页面加载时的值更改为绿色。

<div class="test" data-color="red"></div>

if ( $('.test').data('color') === 'red' ) {
    $(this).data('color', 'green');
}

Answer 1

this不引用.test，如果要更改.test元素的数据颜色值，则需要使用：

$(document).ready(function() {
    if ( $('.test').data('color') === 'red' ) {
        $('.test').data('color', 'green');
    }
});

如果您希望在页面加载时附加它，请确保在访问数据属性值时存在目标元素

Answer 2

无法判断你所展示的内容，但除非这是某种处理程序，否则你的$（this）并不是指你在if语句中检查时所选择的元素。试试这个：

var $test = $('.test');

if ($test.data('color') === 'red') {
    $test.data('color', 'green');
}

这是一个jsfiddle来证明它有效。

Answer 3

if ( $('.test').attr("data-color") == 'red' ) {
    $(this).attr({'data-color', 'green'});
}

Answer 4

你可以这样做：

$.each($('.test'), function() {
    if ( $(this).data('color') === 'red' ) {
        $(this).attr('data-color', 'green');
    }
});

<强> Fiddle Demo

Answer 5

如果您需要或想要使用该语法来获取，更新或创建这种属性，您可以像这样为jquery创建一个简单的插件：

    (function ($) {
    $.fn.data = function (prop, value) {
        if(value) {
            return $(this).attr('data-' + prop, value);
        }else{
            return $(this).attr('data-' + prop);//Or return $(this).data(prop);
        }
    };
})(jQuery);

Answer 6

您不能使用data("key", "value")操作来更新dom属性。因为，此函数也用于操作像data-custom={"key":"value"}这样的对象属性。当您使用data("color")时，这将返回一个对象，并将保存为jquery $.cache。当你更新它时，它实际上会更新缓存版本，而不是实际的dom属性。

您可以看到jquery doc;

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

要更新dom属性，您可以使用attr()之类的;

if ( $('.test').data('color') === 'red' ) {
    $('.test').attr('data-color', 'green');
}

这是一个工作小提琴：http://jsfiddle.net/cubuzoa/etb6k/

Answer 7

您可以在jquery中使用attr()

$(this).attr('data-color', 'green');

也改变选择器

if ( $('.test').attr('data-color') == 'red' ) {
    $('.test').attr('data-color', 'green');
  }

DEMO

无法通过jquery更新数据值

7 个答案: