Javascript 为不同的对象重新创建信息元素还是隐藏它们？

目前，当我使用jQuery显示不同的元素时，我从头开始创建它们并将它们添加到页面中

我希望用户能够选中一个元素上的一个框，然后单击按钮查看一些不同的信息，然后能够切换回并看到前面的框仍处于选中状态

因为我现在每次用户切换时都在制作新元素，所以这不可能以简单的方式实现

我想知道是重新绘制元素还是修改CSS

display

属性更好

我可以理解为什么隐藏元素会有帮助，但我不确定是否有必要在屏幕上保留约150个元素，而只是让它们不显示

这就是我到目前为止所做的：

此代码更改信息行的颜色：

$("#table").on("click", ".on", function() {
    $(this).removeClass("on");
    $(this).addClass("off");
});
$("#table").on("click", ".off", function() {
    $(this).addClass("on");
    $(this).removeClass("off");
});

---

问题是，如果您查看另一组信息行，然后返回，则行颜色将重置。

我建议您根据需要生成信息行，即当用户第一次单击标签时。这样，当页面加载时，就不会浪费资源创建HTML元素。为特定项目创建行后，可以将它们从显示容器中交换出来，它们将保留从用户单击中获得的高亮显示

我已经重写了

switchData

函数，以便它检查

对象中的
行
属性。如果不存在，则创建HTML行并将其推入数组，然后将其作为
对象的新属性添加。在随后调用
switchData
时，我们可以立即使用
object.rows

function switchData(object) {
    $("#table").contents("div").remove();
    if (!('rows' in object)) {
        var rows = [];
        Object.keys(object).forEach(function (key) {
            if (key != 'rows') {
                rows.push($('<div class="row on">' +
                        object[key].name + '</div>'));
            }
        });
        object.rows = rows;
    }
    object.rows.forEach(function (row) {
        $('#table').append(row);
    });
}

正文{
字体系列：无衬线；
}
司{
光标：指针；
}
#桌子{
边缘顶部：5px；
}
.行{
填充物：5px10px；
边框顶部：1px实心#fff；
颜色：#fff；
}
.在{
背景颜色：绿色；
}
.关{
背景色：红色；
}

显示对象1

显示对象2
如果从后端检索数据，并且您处理的是元素的可见性，那么最终用户在刷新页面之前将永远不会获得更新的数据。即使数据是静态的，维护元素属性或可见性的跟踪也是一件痛苦的事情。一个很好的小例子，说明你正在努力实现的目标会有所帮助<代码>显示：无/显示：块
可能是一种解决方案。如果每个元素都属于数组中的一个对象，那么您可以将元素的更新属性存储为对象的键，并且每次在循环中创建它们时，您都可以使用这些属性来创建元素。太棒了，当我有更好的机会时，我会检查它，如果它有效，我会接受您的答案。但是这个看起来很好，谢谢！抱歉，还有一个问题，但是否可以合并此功能以使用cookies记住页面刷新上的选项？我知道cookie，但以前从未使用过，也不知道需要做多少工作。理论上，你可以使用cookie来存储页面状态，但cookie实际上是用来与服务器通信的。其思想是cookie存储会话ID，服务器将其用作在数据库中查找会话数据的密钥。一种更简单的方法是将页面状态存储在浏览器的。我可以帮你，但这是一个新话题，最好用一个新问题来回答。如果你对我对当前问题的回答感到满意，请投票并接受我的回答。太好了！接受并投票支持你的答案。你能告诉我如何存储页面状态吗？我会非常感激的！另外，保存页面状态是否对每个用户都是唯一的？这就是我所需要的。每当用户修改页面时，您必须将页面状态编码为字符串，并调用保存字符串。当页面加载时，调用并解码字符串中的页面状态。没有固定的方式对页面状态进行编码。如果你提出一个新问题，我可以向你展示一种可能的方法。是的，浏览器的
localStorage
数据是用户独有的。是本地的。