如何在多个对象上放置点击事件

Question

这就是我尝试为菜单中的每个选项调用 setState(id) 函数的方式。它不起作用。也许还有另一种方法可以正确地做到这一点？

我知道函数内嵌函数不是个好主意，但我是 jQuery 的新手，真的不知道如何修复它。感谢您的回答。

function setState(id) {
  switch (id) {
    case 1: { break; }
    case 2: { break; }
    case 3: { break; }
    case 4: { break; }
    case 5: { break; }
    case 6: { break; }
  }   
}

$('#button-menu').find('span').each.(function(){
  $(this).on("click", (function(){
    setState($(this).data("id"))
  }))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-icon" id="button-menu">
  <span data-id="1">Option1</span>
  <span data-id="2">Option2</span>
  <span data-id="3">Option3</span>
  <span data-id="4">Option4</span>
  <span data-id="5">Option5</span>
  <span data-id="6">Option6</span>
</div>

Answer 1

不需要 .each 函数，因为 jQuery 为您抽象了它...

你可以简单地$('#button-menu').find('span').on('click', func...

并且 jQuery 会将事件应用于选择器 returns 的每个按钮。

Answer 2

您的代码的主要问题是 each 之后的 . 导致语法错误。您可以在控制台中看到这一点。请注意，当某些 JS 代码无法按预期工作时，这应该是您检查的第一个地方。在大多数浏览器中，可以通过按 F12

打开

您还可以做其他几件事来改进逻辑：

删除 find() 并直接 select #button-menu span 元素
完全删除 each()。您可以在一组元素上添加事件处理程序作为一个组
你不需要在 ()

function setState(id) {
  switch (id) {
    case 1:{
      console.log('one');
      break;
    }
    case 2: {
      console.log('two');
      break;
    }
    case 3: {
      console.log('three');
      break;
    }
    case 4: {
      console.log('four');
      break;
    }
    case 5: {
      console.log('five');
      break;
    }
    case 6: {
      console.log('six');
      break;
    }
  }
}

$('#button-menu span').click(function() {
  setState($(this).data("id"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-icon" id="button-menu">
  <span data-id="1">Option1</span>
  <span data-id="2">Option2</span>
  <span data-id="3">Option3</span>
  <span data-id="4">Option4</span>
  <span data-id="5">Option5</span>
  <span data-id="6">Option6</span>
</div>

Answer 3

更简单的方法是使用事件委托。这只是意味着在容器元素上放置一个点击处理程序并捕获所有冒泡到顶部的子事件，即。 事件冒泡。下面的快速示例：

在这种情况下，

button-menu 是您的容器元素...

$("#button-menu").on('click', function(e){
    let id = $(e.target).data("id");
    setState(id);
    console.log(id);
});

希望对您有所帮助。

Answer 4

去掉“.”在 "each" 之后，你很好。

如何在多个对象上放置点击事件

How can i put click events on multiple objects

javascript

each

jquery