Tạo lại các phần tử thông tin cho một đối tượng khác hoặc ẩn chúng?

Question

Hiện tại khi tôi hiển thị các phần tử khác nhau với jQuery, tôi đang tạo lại chúng từ đầu và thêm chúng vào trang.

Tôi đã đến điểm mà tôi muốn người dùng có thể chọn hộp trên một phần tử, sau đó nhấp vào nút để xem một số thông tin khác, sau đó có thể chuyển về và xem hộp trước đó vẫn được chọn .

Vì hiện tại tôi đang tạo thành phần mới mỗi lần người dùng chuyển, điều này không thể thực hiện một cách đơn giản.

Tôi tự hỏi liệu tốt hơn là vẽ lại các phần tử hay sửa đổi thuộc tính CSS display.

Tôi có thể thấy lý do tại sao sẽ hữu ích khi ẩn các phần tử nhưng tôi không chắc chắn cần giữ ~ 150 phần tử trên màn hình và chỉ hiển thị chúng không được hiển thị.

Đây là những gì tôi có cho đến nay:

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

Mã này thay đổi màu sắc của dòng thông tin:

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

Vấn đề là nếu bạn nhìn vào một tập hợp các dòng thông tin và sau đó quay lại, màu sắc của hàng được đặt lại.

Answer 1

Tôi khuyên bạn nên tạo các hàng thông tin theo yêu cầu, tức là, khi người dùng nhấp vào nhãn lần đầu tiên. Bằng cách đó, bạn không lãng phí tài nguyên tạo các phần tử HTML khi tải trang. Khi các hàng đã được tạo cho một mục cụ thể, bạn có thể hoán đổi chúng ra khỏi vùng chứa hiển thị và chúng sẽ giữ lại phần nổi bật mà chúng đã thu được từ các nhấp chuột của người dùng.

Tôi đã viết lại chức năng switchData của bạn để nó kiểm tra thuộc tính rows trong object. Nếu nó không tồn tại, các hàng HTML được tạo và được đẩy vào một mảng, sau đó được thêm vào như một thuộc tính mới của object. Trong các cuộc gọi tiếp theo đến switchData, chúng tôi có thể sử dụng ngay 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); 
    }); 
} 

Đoạn mã sau minh họa cách tiếp cận này. Ngoài chức năng sửa đổi switchData và một vài thay đổi về kiểu dáng, mọi thứ đều giống như trong fiddle của bạn.

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>