调整窗口大小时更新数据属性

Update data- attribute on window resize

本文关键字：更新 数据属性 小时 窗口 调整      更新时间：2024-01-27

我需要在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中添加具有新值的新数据属性，而不是更新现有值。

有其他解决方案吗？

不要使用attr()更新数据，而是使用data()

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

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

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

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

你能试试这个吗？

$(window).resize(function() {
   customFn();
});
相关文章：