Question

我正在使用localStorage来保存某些<div>的CSS信息。当用户修改其中一个<div>时，它会使用以下语法设置localStorage项：

ID OF ELEMENT + "-" + x,y, or z (for the different CSS attributes)

因此，div #two的x坐标的项目示例如下：

two-x

这些设置工作正常，我可以通过在页面加载上执行以下操作来反映这一点：

$(".drag").css({
"left" : localStorage.getItem("two-x"), 
"top" : localStorage.getItem("two-y"),
"z-index" : localStorage.getItem("two-z"),
});

页面上会有很多内容，我无法对每个页面进行硬编码。所以，这让我想到了我的问题...... 如何获取页面上的所有ID，将它们分配给变量，然后更改每个ID的CSS，直到它们全部被识别为止。帐户？

我的尝试：

var idtwo = [];
$("body").find("div").each(function(){ idtwo.push(this.id); });
$(".drag").css({
            "left" : localStorage.getItem(idtwo + "-x"), 
            "top" : localStorage.getItem(idtwo + "-y"),
            "z-index" : localStorage.getItem(idtwo + "-z"),
});

唯一的问题是idtwo的输出是one,two（当页面上有两个div，ID为1和2时），需要的地方只需one，运行CSS更改，然后two，然后运行CSS更改。

Answer 1

希望这有帮助。

$('div[id]').each(function() {
    var id = $(this).attr('id');
    $(this).css({
        'left': localStorage.getItem(id + '-x'), 
        'top': localStorage.getItem(id + '-y'),
        'z-index': localStorage.getItem(id + '-z')
    });
});

Answer 2

试试这个（未经测试）：

$('div', document.body).each(function () {
    var id = $(this).prop('id');

    if (id) {
        $(this).css({
            'left': localStorage.getItem(id + '-x'), 
            'top': localStorage.getItem(id + '-y'),
            'z-index': localStorage.getItem(id + '-z')
        });
    }
});

获取所有页面ID并一次循环一次以更改CSS？

2 个答案: