时间戳

首页 > 解决方案 > 如何将点击事件放在多个对象上

javascript - 如何将点击事件放在多个对象上

问题描述

这就是我尝试为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>

标签： javascriptjqueryeach

解决方案

您的代码的主要问题是.aftereach导致语法错误。您可以在控制台中看到这一点。请注意，当某些 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>

推荐阅读