試圖在本地複製Codepen代碼

試圖從代碼本地本地工作https://codepen.io/oxla/pen/awmMYY 除了我可以工作的功能之外的所有東西。試圖在本地複製Codepen代碼

我打電話給JS文件和最新的jquery。

<head> 
    <link type="text/css" rel="stylesheet" href="styles.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script src="js/script.js"></script> 
    </head>

我錯過了什麼？

JS的

const checkboxValues = JSON.parse(localStorage.getItem("checkboxValues")) || {}, 
    buttons = Array.from(document.querySelectorAll(".checklist-item__expand")), 
    labels = Array.from(document.querySelectorAll(".checklist-item__title")), 
    checkboxes = Array.from(document.querySelectorAll('input[type="checkbox"]')), 
    checkboxesLength = checkboxes.length, 
    progress = document.querySelector(".progress__bar"), 
    counter = document.querySelector(".progress__count"), 
    reset = document.querySelector(".progress__reset"); 
function loadIds() { 
    for (let a = 0; a < checkboxesLength; a += 1) { 
     const b = a => a.replace(/[ ,.!?;:'-]/g, ""); 
     (checkboxes[a].id = `${b(
      checkboxes[a].nextSibling.nextSibling.innerText 
     ).toLowerCase()}`), checkboxes[a].nextSibling.setAttribute(
      "for", 
      `${b(checkboxes[a].nextSibling.nextSibling.innerText).toLowerCase()}` 
     ); 
    } 
} 
function updateStorage(a) { 
    (checkboxValues[a.id] = a.checked), localStorage.setItem(
     "checkboxValues", 
     JSON.stringify(checkboxValues) 
    ); 
} 
function countChecked() { 
    if ("checkbox" === this.type) { 
     const a = this.parentNode.parentNode.parentNode, 
      b = 
       a.querySelectorAll("input:checked").length/
       a.querySelectorAll(".checklist-item").length; 
     a.querySelector(
      ".checklist__percentage-border" 
     ).style.transform = `scaleX(${b})`; 
    } else 
     Array.from(document.querySelectorAll(".checklist")).forEach(a => { 
      const b = 
       a.querySelectorAll("input:checked").length/
       a.querySelectorAll(".checklist-item").length; 
      a.querySelector(
       ".checklist__percentage-border" 
      ).style.transform = `scaleX(${b})`; 
     }); 
    let a = 0; 
    Array.from(document.querySelectorAll("input:checked")).forEach(() => { 
     a += 1; 
    }), (counter.innerText = `${a}/${checkboxesLength}`), (progress.style.transform = `scaleX(${a/
     checkboxesLength})`), (checkboxValues.globalCounter = a), updateStorage(this); 
} 
function loadValues() { 
    const a = checkboxValues.globalCounter || 0; 
    (counter.innerText = `${a}/${checkboxesLength}`), Object.keys(
     checkboxValues 
    ).forEach(a => { 
     "globalCounter" !== a && 
      (document.getElementById(a).checked = checkboxValues[a]); 
    }), countChecked(); 
} 
function toggleExpand() { 
    const a = this.parentNode; 
    a.querySelector(".line").classList.toggle("closed"), a.classList.toggle(
     "open" 
    ); 
} 
function resetCheckboxes() { 
    this.classList.add("progress__reset--pressed"), checkboxes.forEach(
     a => (a.checked = !1) 
    ), Object.keys(checkboxValues).forEach(
     a => delete checkboxValues[a] 
    ), countChecked(); 
} 
window.onload = function() { 
    loadIds(), loadValues(), checkboxes.forEach(a => 
     a.addEventListener("click", countChecked) 
    ), buttons.forEach(a => 
     a.addEventListener("click", toggleExpand) 
    ), labels.forEach(a => 
     a.addEventListener("click", toggleExpand) 
    ), reset.addEventListener("click", resetCheckboxes), reset.addEventListener(
     "animationend", 
     function() { 
      this.classList.remove("progress__reset--pressed"); 
     }, 
     !1 
    ), "serviceWorker" in navigator && 
     navigator.serviceWorker.register("/sw.js", { scope: "/" }) 
};

來源

2017-06-27 Jared

底部你編譯到CSS的少？並添加了整個HTML？ –

是的我遵守CSS，並且我複製了所有的HTML。只有功能不起作用。鏈接CSS和腳本。我有index.html。 script.js和styles.css – Jared

嘗試將'

相關問題