Ponownie utwórz elementy informacyjne dla innego obiektu lub ukryj je?

Question

Obecnie, gdy wyświetlam różne elementy za pomocą jQuery, ponownie je tworzę od zera i dodam do strony.

Doszedłem do punktu, w którym chcę, aby użytkownik mógł zaznaczyć pole na jednym elemencie, a następnie kliknąć przycisk, aby zobaczyć różne informacje, a następnie móc się z powrotem przełączyć i zobaczyć wcześniejsze zaznaczone pole .

Ponieważ obecnie robię nowe elementy za każdym razem, gdy użytkownik się przełącza, nie jest to możliwe w prosty sposób.

Zastanawiam się, czy lepiej jest przerysować elementy lub zmodyfikować właściwość CSS display.

Mogłem zobaczyć, dlaczego pomocne byłoby ukrywanie elementów, ale nie jestem pewien, czy zachodzi konieczność przechowywania ~ 150 elementów na ekranie i po prostu ich nie wyświetlać.

To, co mam tak daleko:

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

Kod ten zmienia kolor wierszy informacje:

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

Problem polega na tym, że jeśli spojrzeć na inny zestaw wierszy informacyjnych a następnie wrócić, kolory rzędu są resetowane.

Answer 1

Zalecam, aby generować wiersze informacyjne na żądanie, , tj., gdy użytkownik kliknie etykietę po raz pierwszy. W ten sposób nie marnujesz zasobów tworzących elementy HTML podczas ładowania strony. Po utworzeniu wierszy dla określonego elementu można je zamienić z kontenera wyświetlania i zachowają wyróżnienie, które uzyskali dzięki kliknięciom użytkownika.

Przepisałem twoją funkcję switchData, aby sprawdzała, czy jest dostępna właściwość rows w object. Jeśli nie istnieje, wiersze HTML są tworzone i przesyłane do tablicy, która jest następnie dodawana jako nowa właściwość object. Przy kolejnych połączeniach do switchData możemy natychmiast użyć 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); 
    }); 
} 

Poniższy fragment ilustruje to podejście. Oprócz zmodyfikowanej funkcji switchData i kilku zmian stylizacji, wszystko jest takie samo jak w skrzypcach.

var team1 = { 
 
\t "information1": { 
 
\t \t "name": "Giuseppe", 
 
\t \t "age": "34" 
 
\t }, 
 
\t "information2": { 
 
\t \t "name": "Rodolfo", 
 
\t \t "age": "20" 
 
\t }, 
 
}; 
 

 
var team2 = { 
 
\t "information1": { 
 
\t \t "name": "Alice", 
 
\t \t "age": "27" 
 
\t }, 
 
\t "information2": { 
 
\t \t "name": "Jane", 
 
\t \t "age": "40" 
 
\t }, 
 
}; 
 

 
$(document).ready(function() { 
 

 
\t $("#displayObject1").on("click", function() { 
 
\t \t switchData(team1); 
 
\t }); 
 

 
\t $("#displayObject2").on("click", function() { 
 
\t \t switchData(team2); 
 
\t }); 
 
\t $("#table").on("click", ".on", function() { 
 
\t \t $(this).removeClass("on"); 
 
\t \t $(this).addClass("off"); 
 
\t }); 
 
\t $("#table").on("click", ".off", function() { 
 
\t \t $(this).addClass("on"); 
 
\t \t $(this).removeClass("off"); 
 
\t }); 
 
}); \t 
 

 
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>