至尊JavaScript新手-組合函數

Question

請原諒我缺乏知識，我才剛剛開始學習。 有一個無序列表通過包含文件被拉入網頁。 某些頁面只應顯示該無序列表中的某些列表項。 所以開發人員提出的解決方案很簡單，通過在每個頁面上都有一個腳本來隱藏您不想看到的內容，如下所示：

myFunction();
function myFunction() {
  var list = document.getElementsByClassName("content")[0];
  list.getElementsByTagName("li")[0].style.display="none";
list.getElementsByTagName("li")[1].style.display="none";
list.getElementsByTagName("li")[2].style.display="none";
list.getElementsByTagName("li")[3].style.display="none";
}

現在看看這個站點，將它作為一個長的滾動頁面而不是多個頁面更有意義，但顯然這不適用於此腳本。 有沒有一種方法可以在頁面上包含多個這樣的實例，並使用類似的邏輯，但是讓每個包含的實例只顯示無序列表中的某些列表項，也許是通過將每個實例包裝在一個 ID 中並以該 ID 為目標？

例如：

<div id="one">
#include virtual="/content.html"
</div>

<div id="two">
#include virtual="/content.html" 
</div>

其中 content.html 包含無序列表，但 div id one 僅顯示該列表中的某些列表項，而 div id two 顯示該列表中的某些（不同）列表項？

我希望這是有道理的。 再次，如果我沒有很好地解釋這一點，我們深表歉意。 非常感謝任何指導。

謝謝！

Answer 1

您正在尋找的架構是一個過濾器 function - 您一次獲取一個項目列表 go ，如果您不想保留它們，請將它們取出。 您需要以一種概括任何列表和任何保留/不保留標准的方式編寫此代碼，然后使用您想到的特定列表和標准運行該 function。

所以，像這樣：

<div id="one">
#include virtual="/content.html"
</div>

<div id="two">
#include virtual="/content.html" 
</div>

<script>
// listDivId: The "id" of the div the list is under
// predicate: A function that takes the list item, and its index 
// in the list, and returns either true or false depending on 
// whether it should still be there
function filterContent(listDivId, predicate) {
    // First get the div you want to filter, if it's not there, return
    const listDiv = document.getElementById(listDivId);
    if (listDiv === null) return;
    // Then, get the list itself
    const list = listDiv.getElementsByClassName("content")[0].getElementsByTagName("li");
    // The "list" variable is now an array of "li" items, with a different 
    // item from list[0] to list[list.length - 1]. Use this while loop to 
    // go through each of them once
    let i = 0;
    while (i < list.length) {
        // Call the predicate. If it returns false, hide the item.
        if (!predicate(list[i], i)) {
            list[i].style.display = "none";
        }
        i = i + 1;
    }
}

// Now define our predicates.
function shouldAppearInOne(element, i) {
    return i >= 0 && i < 3;
}

function shouldAppearInTwo(element, i) {
    return i >= 3 && i < 6;
}

// Once we have both of those, call the filter function with those predicates
filterContent("one", shouldAppearInOne);
filterContent("two", shouldAppearInTwo);
</script>

順便說一句，你提到content.html是動態生成的——坦率地說，這個過濾的東西實際上放在生成content.html的代碼中會更好。 不是在你不想出現的列表項上設置display = none ，而是在瀏覽器有機會對它們進行排序之前寫下你確實想要的項目：

let i = 0;
while (i < list.length) {
    // If we do want to include it, write the <li> element
    // (note that this assumes that `list` is just the text in the elements)
    if (predicate(list[i], i) {
        document.write("<li>" + list[i] + "</li>");
    }
    i = i + 1;
}