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

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函数，以便它rows检查object. 如果不存在，则创建 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功能和一些样式更改之外，一切都与您的小提琴中的相同。

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

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