無需jQuery即可按需加載頁面的一部分

Question

我是網頁設計的新手，我正在嘗試一些東西。

假設我不能使用jquety並且不能將任何文件上傳到頁面，而是可以使用簡單的javascript。

我現在所擁有的是一個帶有少量標簽的表格，以及一個基於復選框顯示的javascript函數。

腳本

 <script language="javascript">
function toggleTR(trId) {
    var trArray = document.getElementsByTagName("tr");
    for(i = 0; i < trArray.length; i++){
        if(trArray[i].id == trId){
            if(trArray[i].style.display == 'none'){
                trArray[i].style.display = '';
            }else{
                trArray[i].style.display = 'none';
            }
        }
    }
}
</script>

復選框

<input type="checkbox" onClick="toggleTR('TR1');"/> TR1

和簡單的表

<table>
<tr id="TR1" style="display: none;">
<td>content</td>
</tr>
</table>

它可以按預期工作，但是隨着頁面變大，加載時間變得很可怕。

更改顯示屬性后，是否可以按需加載這些標簽？ 我已經讀過有關延遲加載的信息，但無法使其與此一起工作。

請嘗試盡可能簡單地解釋它，因為我完全沒有經驗:-)

Answer 1

由於ID應該是唯一的，因此應該對其進行更優化

function toggleTR(trId) {
    var tr= document.getElementById(trId);
    if(tr != null){
        if(tr.style.display == 'none'){
            tr.style.display = '';
        }else{
            tr.style.display = 'none';
        }
    }
}

而且，如果您不想隱藏/顯示唯一元素，則可以使用類。

<table>
<tr class="TR1" style="display: none;">
<td>content</td>
</tr>
</table>

和

function toggleTR(trClass) {
    var tr= document.querySelectorAll('.'+trClass);
    if(tr != null){
        for(var i = 0, l = tr.length; i < l ; i++){
            if(tr[i].style.display == 'none'){
                tr[i].style.display = '';
            }else{
                tr[i].style.display = 'none';
            }
        }
    }
}

Answer 2

不能有延遲加載。 您的循環將繼續運行直到結束。 如果找到ID，則給出break語句。這樣，其余的循環就不會運行。

    <script language="javascript">
    function toggleTR(trId) {
            var trArray = document.getElementsByTagName("tr");
            for(i = 0; i < trArray.length; i++){
            if(trArray[i].id == trId){
                if(trArray[i].style.display == 'none'){
                    trArray[i].style.display = '';
                }else{
                    trArray[i].style.display = 'none';
                }
                break;
            }
        }
    }
    </script>

或您可以通過id查找特定元素，然后根據需要進行切換。 雖然這是推薦的。

    var trobj = document.getElementById(trId);
    if (var != null)
    {
     // toggle code here
    }