Javascript將信息從一個函數傳遞到另一個函數

Question

我創建了一個 JS 函數，如果面包屑太多，它會隱藏一定數量的面包屑。 它們被一個按鈕（省略號）取代，當您單擊該按鈕時，隱藏的面包屑就會顯示出來。

問題：我遍歷面包屑，看看是否有足夠的隱藏。 如果有我隱藏它們。 但我不知道如何調用代碼來創建按鈕。 如果我在循環中調用按鈕代碼，則會生成 1 個以上的按鈕。

現在無論是否有足夠的面包屑隱藏，該按鈕都會出現。

在我看來，我會讓帶有 if 語句的 for 循環返回 true 到按鈕函數。 但我無法弄清楚如何做到這一點。 如果可以，請提供重構此代碼的任何指示。

這是一個 Codepen： https ://codepen.io/sibarad/pen/GRvpEbp

基本 HTML：

<nav aria-label="breadcrumb">
   <ol class="c-breadcrumb mb-7 md:mb-8">
      <li class="c-breadcrumb-item">
         <a href="/#" class="c-link">Breadcrumb 1</a>
      </li>
      <li class="c-breadcrumb-item">
         <a href="#" class="c-link">Breadcrumb 2</a>
      </li>
      <li class="c-breadcrumb-item">
         <a href="#" class="c-link">Longer Breadcrumb Name 03</a>
      </li>
   </ol>
</nav>

Javascript：

function breadcrumb() {
    // Target specific breadcrumbs, not 1st or last 2
    let hiddenbreadcrumb = document.querySelectorAll('.c-breadcrumb-item:nth-child(1n+2):nth-last-child(n+3)');

    // Loop through select breadcrumbs, if length is greater than x hide them.
    for (var i = 0; i < hiddenbreadcrumb.length; i++) {
        if(hiddenbreadcrumb.length >= 3) {
            hiddenbreadcrumb[i].style.display = "none";
        }
    }

    // This would be the button function, but I don't know how to engage this only if the if statement above was met.
    let li = document.createElement('li');
        li.className = 'c-breadcrumb-item';
    let ellipbutton = document.createElement('button');
        ellipbutton.type = 'button';
        ellipbutton.innerHTML = '...';
        ellipbutton.className = 'c-breadcrumb_btn u-btn-clear';

    ellipbutton.onclick = function() {
        console.log("clicked");
        for (var i = 0; i < hiddenbreadcrumb.length; i++) {
            hiddenbreadcrumb[i].style.display = "flex";
        }
        li.style.display = "none";
    };

    li.appendChild(ellipbutton);

    let container = document.querySelector('.c-breadcrumb-item:first-child');

    container.insertAdjacentElement("afterend", li);
}

breadcrumb();

Answer 1

我們可以稍微重構您的代碼來實現這一點 - 檢查是否有超過 3 個面包屑的if語句不需要在for循環內 - 多次檢查相同的值是多余的。

如果我們將它移到循環之外，那么它可以

a) 在沒有足夠的面包屑時防止不必要的循環，並且

b) 也環繞按鈕創建代碼，這應該可以解決您的問題。

例如：

if (hiddenbreadcrumb.length >= 3) {

    for (var i = 0; i < hiddenbreadcrumb.length; i++) {
        hiddenbreadcrumb[i].style.display = "none";
    }

    let li = document.createElement('li');
    li.className = 'c-breadcrumb-item';

    let ellipbutton = document.createElement('button');
    ellipbutton.type = 'button';
    ellipbutton.innerHTML = '...';
    ellipbutton.className = 'c-breadcrumb_btn u-btn-clear';

    ellipbutton.onclick = function() {
        console.log("clicked");
        for (var i = 0; i < hiddenbreadcrumb.length; i++) {
            hiddenbreadcrumb[i].style.display = "flex";
        }
        li.style.display = "none";
    };

    let container = document.querySelector('.c-breadcrumb-item:first-child');
    container.insertAdjacentElement("afterend", li);
}

Answer 2

看起來像是一些小的初始化問題。 這應該糾正它：

改變這個：

let hiddenbreadcrumb = document.querySelectorAll('.c-breadcrumb-item:nth-child(1n+2):nth-last-child(n+3)');

// Loop through select breadcrumbs, if length is greater than x hide them.
for (var i = 0; i < hiddenbreadcrumb.length; i++) {
  if(hiddenbreadcrumb.length >= 3) {
    hiddenbreadcrumb[i].style.display = "none";
  }
}

對此：

let hiddenbreadcrumb = document.querySelectorAll('.c-breadcrumb-item');
if(hiddenbreadcrumb.length < 3)
  return
for (var i = 1; i < hiddenbreadcrumb.length - 1; i++) {
  hiddenbreadcrumb[i].style.display = "none";
}

Answer 3

試試這個...它允許 3 li 項目作為 item1 ... item2ndLast, itemLast

(function () {
  "use strict";

  function breadcrumb() {
    
    let hiddenbreadcrumb = document.querySelectorAll(".c-breadcrumb-item:nth-child(1n+2)");
    
    if (hiddenbreadcrumb.length <= 3) return;
    for (var i = 1; i < hiddenbreadcrumb.length - 1; i++) {
      hiddenbreadcrumb[i].style.display = "none";
    }

    let li = document.createElement("li");
    li.className = "c-breadcrumb-item";
    let ellipbutton = document.createElement("button");
    ellipbutton.type = "button";
    ellipbutton.innerHTML = "...";
    ellipbutton.className = "c-breadcrumb_btn u-btn-clear";

    ellipbutton.onclick = function () {
      console.log("clicked");
      for (var i = 0; i < hiddenbreadcrumb.length; i++) {
        hiddenbreadcrumb[i].style.display = "flex";
      }
      li.style.display = "none";
    };

    li.appendChild(ellipbutton);

    let container = document.querySelector(".c-breadcrumb-item:first-child");

    container.insertAdjacentElement("afterend", li);
  }

  breadcrumb();
})();