时间戳

首页 > 解决方案 > 循环仅将 onclick 应用于最后一个元素

javascript - 循环仅将 onclick 应用于最后一个元素

问题描述

我正在尝试使用 for of 循环将 onclick 事件应用于某些元素。问题是它仅将 onclick 应用于列表的最后一个元素，我找不到问题

这是应用 onclick 的函数：

assign_onclick_output_header = element_id => {
    const id = element_id+"-output"
    const output = document.getElementById(id)
    const output_header = output.getElementsByClassName('card-header')[0]

    output_header.onclick = () => { 
        const state = output_header.classList.contains('opened')
        console.log(state)
        if (state) {
            output_header.classList.remove('opened')
        } else {
            output_header.classList.add('opened')
        }
    }
}

这是调用通过循环应用 onclick 的函数的函数：

execute = async () => {
    for (const platform_id of this.platforms_ids) {
        const data = {
            platform_id:platform_id,
            command:this.command
        }

        const resp = await this.fetch_output(data)
        this.assign_onclick_output_header(platform_id)
    }
}

platform_ids 值：

platforms_ids: (4) [598, 612, 641, 671]

的HTML：

<div id="output-container" class="card-body">
<div class="card mt-3" id="598-output">
    <div class="card-header" style="cursor:pointer">euroformac (86.109.107.51)</div>
    <div class="card-body">some content</div></div>
<div class="card mt-3" id="612-output">
    <div class="card-header" style="cursor:pointer">fponline (86.109.107.54)</div>
    <div class="card-body">Some content</div>
</div>
<div class="card mt-3" id="641-output">
    <div class="card-header" style="cursor:pointer">formad (86.109.107.239)</div>
    <div class="card-body">Some content</div>
</div>
<div class="card mt-3" id="671-output">
    <div class="card-header" style="cursor:pointer">pen (176.28.115.54)</div>
    <div class="card-body">Some content</div>
</div>

I tried to debug but I was unable to find the bug,

thank you guys.

标签： javascript

解决方案

无论您为什么需要这种方式，都可以使用异步生成器等高级 js 功能来完成。您必须设置一个异步for of循环而不是同步循环。最后，card-header元素将获得 onclick 处理程序，因此，在单击它们后，它们的背景将是橙色的。：

assign_onclick_output_header = element_id => {

    const id = element_id+"-output";
    const output = document.getElementById(id);
    const output_header = output.getElementsByClassName('card-header')[0];

    output_header.onclick = () => { 
        const state = output_header.classList.contains('opened')
        if (state) {
            output_header.classList.remove('opened')
        } else {
            output_header.classList.add('opened')
        }
    }
}

async function* getData(ids) {
   // emulating ajax calls
   for (let platform_id of ids) {
        await new Promise(resolve => {
            setTimeout(resolve, 2000);
        });
        yield platform_id;
   }
}


(async () => {
  let gen = getData([598, 612, 641, 671]);
  for await (let platform_id of gen) {
    assign_onclick_output_header(platform_id);
  }
})();
.opened {
    background-color: orange;
}
<div id="output-container" class="card-body">
<div class="card mt-3" id="598-output">
    <div class="card-header" style="cursor:pointer">euroformac (86.109.107.51)</div>
    <div class="card-body">some content</div><br>
</div>
<div class="card mt-3" id="612-output">
    <div class="card-header" style="cursor:pointer">fponline (86.109.107.54)</div>
    <div class="card-body">Some content</div><br>
</div>
<div class="card mt-3" id="641-output">
    <div class="card-header" style="cursor:pointer">formad (86.109.107.239)</div>
    <div class="card-body">Some content</div><br>
</div>
<div class="card mt-3" id="671-output">
    <div class="card-header" style="cursor:pointer">pen (176.28.115.54)</div>
    <div class="card-body">Some content</div><br>
</div>
</div>

推荐阅读