时间戳

首页 > 解决方案 > 只执行一次的函数

javascript - 只执行一次的函数

问题描述

首先，我的代码并不漂亮。这只是一个例子，然后我会改进它

我正在做一个过滤器。每次我点击一个过滤器时，它都会被添加到一个显示所有活动过滤器的 div 中。

options.forEach(element => {
            element.addEventListener("click", (e) => {
                let id = e.target.id;

                if(filters.children.length > 0){
                    let allFilters = filters.children;
                    console.log(allFilters);
                    for (let i = 0; i < allFilters.length; i++) {
                        const element = allFilters[i];
                        let filterId = element.id.substr(7);
                        if(id == filterId){
                            return;
                        }
                    }
                }
                
                let button = document.createElement("button");
                button.id = "option_" + id;
                button.innerText = id;
                filters.appendChild(button);
                verificar();
                filtera()
            })
        });

正如你所看到的，我调用了一个我放任何名字的函数。这是最后一个功能。每次添加它都会再次调用它，因此运行的函数不止一个。该功能是删除用户点击的活动过滤器。但是，由于它被多次执行，当该元素被删除时，该函数会再次执行并给出错误，因为该元素不再存在。我想不出正确的方法来做到这一点，有人可以帮忙吗

function filtera() {
            let filtersBtns = document.querySelectorAll("#filters button")
            filtersBtns.forEach(element => {
                element.addEventListener("click", (e) => {
                    console.log(e.target.id);

                    filtersBtns.forEach(element => {
                        if(element.id === e.target.id){
                            filters.removeChild(element);
                            return;
                        }
                    });
                })
            });
        }

<div id="filter" style="display: flex; flex-direction: column;">
        <div id="filters">
        </div>
        
        <br>

        <div style="display: flex; justify-content: space-between;">
            <p id="action">
                Ação
            </p>
            <p id="49">
                49,99
            </p>
            <p id="strategy">
                Estratégia
            </p>
            <p id="100">
                100,00
            </p>
        </div>
    </div>

<div id="container">

        <div class="card action strategy 49">
            <h1>
                Card 1
            </h1>
    
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>
            <p>
               action, strategy, 49.99
            </p>
        </div>...

标签： javascript

解决方案

我这样做的方式显然解决了我的问题。

创建元素时，我通过传递事件侦听器来调用函数

function eventListener(element) {
  element.addEventListener("click", (e) => {
     filtera(e.target);
  })
}

我删除而不使用“removeChild”

function filtera(button) {
   let filtersBtns = document.querySelectorAll("#filters button")
   filtersBtns.forEach(element => {
      if(element.id === button.id){
          filters.removeChild(element);
          return;
      }
   );
}

推荐阅读