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导致语法错误。您可以在控制台中看到它。请注意，当某些JS代码无法正常运行时，这应该是检查的第一位。在大多数浏览器中，可以通过按 F12

来打开它

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

删除find()，只需直接选择#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 2

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

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

然后jQuery会将事件应用于选择器返回的每个按钮。

Answer 3

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

在这种情况下，

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

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

希望这会有所帮助。

Answer 4

删除“。”在“每个”之后，您就可以了。

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

4 个答案: