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

Question

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

我已经到了一个地步，我希望用户能够选中一个元素上的框，然后单击一个按钮以查看一些不同的信息，然后能够切换回去并仍然看到之前的框已检查。

由于每次用户切换时我都在制作新元素，因此无法以直接的方式进行。

我想知道重绘元素还是修改 CSS display 属性.

我明白为什么隐藏元素会有所帮助，但我不确定是否有必要在屏幕上保留约 150 个元素而不显示它们。

这是我目前拥有的：

https://jsfiddle.net/W4Km8/7767/

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

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

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

Answer 1

我建议您在用户第一次点击标签时按需生成信息行，即。这样，您就不会在页面加载时浪费资源制作 HTML 元素。为特定项目创建行后，您可以将它们从显示容器中换出，它们将保留通过用户点击获得的突出显示。

我重写了您的 switchData 函数，以便它检查 object 中的 rows 属性。如果不存在，则创建 HTML 行并将其推入一个数组，然后将其添加为 object 的新属性。在对 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);
    });
}

以下代码片段演示了这种方法。除了修改后的 switchData 函数和一些样式更改外，一切都与 fiddle.

中的相同

var team1 = {
 "information1": {
  "name": "Giuseppe",
  "age": "34"
 },
 "information2": {
  "name": "Rodolfo",
  "age": "20"
 },
};

var team2 = {
 "information1": {
  "name": "Alice",
  "age": "27"
 },
 "information2": {
  "name": "Jane",
  "age": "40"
 },
};

$(document).ready(function() {

 $("#displayObject1").on("click", function() {
  switchData(team1);
 });

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

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);
    });
}

body {
  font-family: sans-serif;
}
div, span {
  cursor: pointer;
}
#table {
  margin-top: 5px;
}
.row {
  padding: 5px 10px;
  border-top: 1px solid #fff;
  color: #fff;
}
.on {
  background-color: green;
}
.off {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="displayObject1">
  <span class="clickable">Display object 1</span>
</div>
<div>
  <hr>
</div>
<div id="displayObject2">
  <span class="clickable">Display object 2</span>
</div>
<div id="table">
</div>

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

Re-create information elements for a different object or hide them?

html

javascript

css

jquery

display