css 如何在同一个类的多个元素中单击具有按钮角色事件的div

hjzp0vay 于 2023-04-08 发布在其他

关注(0)|答案(3)|浏览(150)

所以我试图通过控制台自动点击Instagram的“隐藏故事”设置中的每个按钮，我尝试了以下代码：

for (let i = 0; i < 300; i++) {
  document.getElementsByClassName('wbloks_1')[i]
        .addEventListener('click', function (event) {
        });
}

不幸的是，这不起作用，任何人都有解决方案？div元素：

<div data-bloks-name="bk.components.Flexbox" class="wbloks_1" style="pointer-events: none; margin-right: 12px; flex-shrink: 0; align-items: center; flex-direction: row; justify-content: flex-end;"><div data-bloks-name="bk.components.Flexbox" class="wbloks_1" style="pointer-events: none;"><div data-bloks-name="bk.components.Flexbox" role="button" aria-label="Toggle checkbox" class="wbloks_1" style="pointer-events: none; display: none;"><div data-bloks-name="ig.components.Icon" class="wbloks_1" style="-webkit-mask-image: url(&quot;https://i.instagram.com/static/images/bloks/icons/generated/circle-check__filled__24-4x.png/219f67ac4c95.png&quot;); -webkit-mask-size: contain; background-color: rgb(0, 149, 246); flex-shrink: 0; width: 24px; height: 24px;"></div></div><div data-bloks-name="bk.components.Flexbox" role="button" aria-label="Toggle checkbox" class="wbloks_1" style="pointer-events: none; display: none;"><div data-bloks-name="ig.components.Icon" class="wbloks_1" style="-webkit-mask-image: url(&quot;https://i.instagram.com/static/images/bloks/icons/generated/circle-check__filled__24-4x.png/219f67ac4c95.png&quot;); -webkit-mask-size: contain; background-color: rgba(0, 149, 246, 0.3); flex-shrink: 0; width: 24px; height: 24px;"></div></div><div data-bloks-name="bk.components.Flexbox" role="button" aria-label="Toggle checkbox" class="wbloks_1" style="pointer-events: none;"><div data-bloks-name="ig.components.Icon" class="wbloks_1" style="-webkit-mask-image: url(&quot;https://i.instagram.com/static/images/bloks/icons/generated/circle__outline__24-4x.png/2f71074dce25.png&quot;); -webkit-mask-size: contain; background-color: rgb(54, 54, 54); flex-shrink: 0; width: 24px; height: 24px;"></div></div></div></div>

css

来源：https://stackoverflow.com/questions/75942991/how-click-a-div-with-button-role-event-in-the-same-class-multiple-elements

3条答案

按热度按时间

db2dz4w81#

将所有元素放入一个数组中，并删除第一个元素。单击它，再次调用该函数，直到没有剩余的元素。基本队列。

const queueClick = () => {
  // get all of the buttons into an array
  const buttons = Array.from(document.querySelectorAll('.wbloks_1'));

  const next = () => {
    // get the next button from start of the array
    const button = buttons.shift();

    // click it
    button.click()

    // if we have ones remaining, do it again in 6 seconds
    if (buttons.length) window.setTimeout(next, 6000);
  }
  
  // start the first iteration
  next();
}

queueClick();

<input type="checkbox" class="wbloks_1">
<input type="checkbox" class="wbloks_1">
<input type="checkbox" class="wbloks_1">
<input type="checkbox" class="wbloks_1">
<input type="checkbox" class="wbloks_1">

赞(0）回复(0）举报 2023-04-08

cclgggtu2#

如果你想添加一个延迟（根据你删除的评论），你可以使用setTimeout在一段时间后（以毫秒为单位）调用所有按钮（event delegation）上的函数。
为了模拟这种效果，我在这里添加了一个按钮容器，它在单击每个按钮时记录按钮的文本内容。
delayClick函数接受一个按钮数组（来自查询选择），抓取第一个按钮，单击它，然后在第二次调用该函数后再次调用setTimeout。当数组中没有按钮时，函数返回。

const container = document.querySelector('.container');
const buttons = document.querySelectorAll('.wbloks_1');

container.addEventListener('click', handleClick);

function handleClick(e) {
  if (e.target.matches('button')) {
    console.log(e.target.textContent);
  }
}

function delayClick(buttons) {
  if (!buttons.length) return;
  const [head, ...tail] = buttons;
  head.click();
  setTimeout(delayClick, 1000, tail);
}

delayClick(buttons);

<section class="container">
  <button class="wbloks_1">Button 1</button>
  <button class="wbloks_1">Button 2</button>
  <button class="wbloks_1">Button 3</button>
  <button class="wbloks_1">Button 4</button>
  <button class="wbloks_1">Button 5</button>
</section>

其他文件

赞(0）回复(0）举报 2023-04-08

cld4siwp3#

document.querySelectorAll('.wbloks_1').forEach(button => button.click());

谢谢@Andy Delay：

document.querySelectorAll('.wbloks_1').forEach((button, index) => {
  setTimeout(() => {
    button.click();
  }, index * 1000); // Change the delay time (in milliseconds) as needed
});

赞(0）回复(0）举报 2023-04-08

我来回答

css 如何在同一个类的多个元素中单击具有按钮角色事件的div

3条答案

相关问题

热门标签

最新问答