11

目前，当我使用 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");
});

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

4

1 回答 1

1

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

我已经重写了你的函数switchData，以便它检查. 如果它不存在，则创建 HTML 行并将其推送到一个数组中，然后将其添加为. 在随后的调用中，我们可以立即使用。rowsobjectobjectswitchDataobject.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>

于 2015-12-24T12:29:00.187 回答