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

Question

Currently as I'm displaying different elements with jQuery, I'm re-creating them from scratch and adding them to the page.

I've come to a point where I want the user to be able to check a box on one element, then click a button to see some different information, then be able to switch back and see the earlier box still checked.

Since I'm currently making new elements each time the user switches, this isn't possible in a straightforward manner.

I'm wondering whether it's better to redraw the elements or to modify the CSS display property.

I could see why it would be helpful to hide elements but I'm not sure it's necessary to keep ~150 elements on the screen and just have them not displayed.

This is what I have so far:

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

This code changes the color of information rows:

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

The problem is that if you look at another set of information rows and then come back, the row colors are reset.

Answer 1

I recommend that you generate the information rows on demand, i.e., when the user clicks on a label for the first time. That way, you don't waste resources making HTML elements when the page loads. Once the rows have been created for a particular item, you can swap them out of the display container and they'll retain the highlighting they've acquired from user clicks.

I have rewritten your switchData function so that it checks for a rows property in object. If it doesn't exist, the HTML rows are created and pushed into an array, which is then added as a new property of object. On subsequent calls to switchData, we can use object.rows immediately.

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

The following snippet demonstrates this approach. Apart from the modified switchData function and a few styling changes, everything is the same as in your 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>