Question

我需要在div中写入一些自定义数据属性，如：

data-100="50"

其中“100”是另一个div的高度，“50”是“height / 2”。我已经用jQuery完成了它的工作原理：

function customFn() {
var customFn = $('.page-title').height();     
$('#header).attr('data-' + customFn, 'customFn/2');        
}

customFn();

现在我想在窗口调整大小时更新这些值，所以我添加了：

$(window).resize(customFn);

但我想这不是解决方案，因为当我调整窗口大小时，该函数会在div中使用新值添加新数据属性，而不是更新现有值。

是否有替代解决方案？

Answer 1

请勿使用attr()更新数据，而应使用data()

function customFn() {
    var customFn = $('.page-title').height();     
    $('#header').data(customFn, customFn/2);      
}

Answer 2

据我所知，你试图存储两个值：height和height / 2。您不应该将第一个存储在数据属性的名称中...而是将它们存储在单独的属性中，如下所示：

function customFn() {
    var height = $('.page-title').height();     
    $('#header').data('height', height);        
    $('#header').data('half-height', height/2);      
}

更好的是，由于一个值依赖于另一个值（value1 = value / 2），您实际上只需要存储第一个值，并且可以在需要时计算第二个值。

Answer 3

你能试试吗？

$(window).resize(function() {
   customFn();
});

更新窗口大小的数据属性

3 个答案: