如何使這個 jQuery 代碼在 3.2.1 版上工作

Question

我有一個功能可以下載免費資源並應用或修改我的作品。 我使用此功能通過將所有 div 設置為display=none並單擊按鈕來制作我的網站，相應的 div 顯示style將變為block 。

一切正常，直到我添加了一個音樂播放器，創作者使用了更高的 jQuery 庫（3.2.1 > 1.5.2）。

一切都像以前一樣很好，但是當我單擊按鈕播放音樂時，我無法返回或轉到其他菜單。

調試器錯誤是：

未捕獲的類型錯誤：document.getElementById 不是函數

但是如果我不點擊播放按鈕，一切都是正常的。

function openPage(pageName) {
  var i;
  var x = document.getElementsByClassName("page");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  document.getElementById(pageName).style.display = "block";  
}

Answer 1

Jquery 不會阻止 vanilla Javascript 正常運行。
而且由於您的代碼只是 Javascript，從它看起來沒有錯誤，很難弄清楚為什么會出現這樣的錯誤。 這與 Jquery 無關。

唯一可預見的錯誤是：

pageName不作為參數傳遞；

pageName被傳遞，但不是字符串；

您的文檔中不存在 id 等於pageName值的元素。

您可以通過這種方式編寫代碼來稍微改進您的代碼：

function openPage(pageName) {
    Array.from(document.getElementsByClassName('page')).map(page => page.style.display = 'none');
    document.getElementById(pageName).style.display = "block";  
};

您可以通過添加一些檢查使其“更全面”：

function openPage(pageName) {
    if (pageName && (typeOf pageName === 'string')) {
        Array.from(document.getElementsByClassName('page')).map(page => page.style.display = 'none');
        var target = document.getElementById(pageName);
        if (target) { target.style.display = "block" };
    }
};

當檢查失敗時，你還可以通過登錄控制台來改進它，以進行調試：

function openPage(pageName) {
    if (pageName && (typeOf pageName === 'string')) {
        Array.from(document.getElementsByClassName('page')).map(page => page.style.display = 'none');
        var target = document.getElementById(pageName);
        if (target) { 
            target.style.display = "block" 
        } else {
            console.log('No element found, with the ID of:' , pageName)
        };
    } else {
        console.log('Error in openPage() : The provided [pagename] argument must be a [string]. Provided value for [pageName] is:', pageName);
    }
};