如何多次呼叫函式？

我將如何在代碼的不同部分多次呼叫一個函式。目前我只是復制函式并為所有變數賦予不同的名稱并呼叫該單獨的變數。我將在下面添加一個示例。該方法有效，但沒有辦法有效。更好的方法是什么？感謝您的幫助，我為這個愚蠢的問題道歉。

JS

              // Variable 1
          
          const filterButtons = document.querySelector("#filter-btns").children;
          const items = document.querySelector(".blog__content").children;
        
          for(let i =0; i < filterButtons.length; i  ) {
            filterButtons[i].addEventListener("click", function(){
              for (let j =0; j < filterButtons.length; j  ) {
                filterButtons[j].classList.remove("active2")
              }
              this.classList.add("active2");
              const target = this.getAttribute("data-target")
        
              for (let k = 0; k < items.length; k  ) {
                items[k].style.display = "none";
                if (target == items[k].getAttribute("data-id")) {
                  items[k].style.display = "block";
                }
                if (target == "all") {
                  items[k].style.display = "block";
                }
              }
            })
          }



          // Variable 2
          
          const filterButtons2 = document.querySelector("#filter-btns2").children;
          const items2 = document.querySelector(".blog__content").children;
        
          for(let i =0; i < filterButtons2.length; i  ) {
            filterButtons2[i].addEventListener("click", function(){
              for (let j =0; j < filterButtons2.length; j  ) {
                filterButtons2[j].classList.remove("active2")
              }
              this.classList.add("active2");
              const target = this.getAttribute("data-target")
        
              for (let k = 0; k < items2.length; k  ) {
                items2[k].style.display = "none";
                if (target == items2[k].getAttribute("data-id")) {
                  items2[k].style.display = "block";
                }
                if (target == "all") {
                  items2[k].style.display = "block";
                }
              }
            })
          }

HTML

               <div id="filter-btns"> 
                    <a data-target="corn">
                     

                        <span>Corn</span>

                </a>
               </div>






              <div id="filter-btns2"> 
                    <a data-target="chicken">

                        <span>Chicken</span>
                </a>
                </div>

uj5u.com熱心網友回復：

首先，如果要呼叫兩次，則需要呼叫一個函式

function fn(query) {
    const filterButtons = document.querySelector(query).children;
    const items = document.querySelector(".blog__content").children;

    for (let i = 0; i < filterButtons.length; i  ) {
        filterButtons[i].addEventListener("click", function () {
            for (let j = 0; j < filterButtons.length; j  ) {
                filterButtons[j].classList.remove("active2");
            }
            this.classList.add("active2");
            const target = this.getAttribute("data-target");

            for (let k = 0; k < items.length; k  ) {
                items[k].style.display = "none";
                if (target == items[k].getAttribute("data-id")) {
                    items[k].style.display = "block";
                }
                if (target == "all") {
                    items[k].style.display = "block";
                }
            }
        });
    }
}

然后你可以呼叫它兩次

fn('#filter-btns');
fn('#filter-btns2');

標籤：javascripthtml功能变量筛选

上一篇：Python-如何使用單個函式呼叫呼叫串列中的每個函式

下一篇：如何修復_TypeError（型別'Null'不是'Widget'型別的子型別）？