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

目前,当我用jquery显示不同的元素时,我正在从头开始创建它们,并将它们添加到页面中。
我希望用户能够选中一个元素上的一个框,然后单击一个按钮以查看一些不同的信息,然后能够切换回原来的框并看到之前的框仍然处于选中状态。
因为我现在每次用户切换时都会生成新的元素,所以这是不可能的。
我想知道重新绘制元素还是修改cssdisplay属性更好。
我知道为什么隐藏元素会有帮助,但我不确定是否有必要在屏幕上保留~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");
});

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


最佳答案:

我建议您根据需要生成信息行,即当用户第一次单击标签时。这样,在页面加载时就不会浪费资源来生成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功能和一些样式更改外,一切都与您的小提琴一样。
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>

评论