Повторно создать информационные элементы для другого объекта или скрыть их?

В настоящее время, когда я показываю разные элементы с 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");
});

Проблема в том, что если вы посмотрите на другой набор информационных строк и затем вернетесь, цвета строк будут reset.

ОТВЕТЫ

Ответ 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 и нескольких изменений стиля, все так же, как и в вашей скрипке.

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>