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();
})();