使用jQuery on方法获取点击元素ID及类型的实现方案

云上老周

2026-6-13

解决方案

核心问题分析

你当前的事件绑定把点击事件挂在了document上，触发时this指向整个文档而非点击的图标元素，因此拿不到目标的id和状态类。同时需要明确绑定到图标元素，获取父容器的类型标识，还要处理按钮状态切换的外观更新。

修正后的代码

<link rel="stylesheet" href="//use.fontawesome.com/releases/v6.7.2/css/all.css">

<div>
  <div class="wh-loc">1</div>
  <div class="wh-active"><i id="1" class="fa-solid fa-circle fa-on"></i></div>  
  <div class="wh-name"><i id="2" class="fa-solid fa-circle fa-on"></i></div>  
  <div class="wh-address"><i id="3" class="fa-solid fa-circle fa-on"></i></div>  
</div>

<script>
// 仅绑定到图标元素，利用事件委托适配动态生成的元素
$(document).on('click', '.fa-solid.fa-circle', function() {
  const $icon = $(this);
  // 获取当前状态并切换
  const isOn = $icon.hasClass('fa-on');
  const newStatus = isOn ? 'fa-off' : 'fa-on';
  // 更新图标外观
  $icon.toggleClass('fa-on fa-off');
  
  // 获取所需数据
  const id = $icon.attr('id');
  const type = $icon.parent().attr('class'); // 父容器的类型标识
  
  console.log(`ID: ${id}, 类型: ${type}, 新状态: ${newStatus}`);
  
  // 发送AJAX请求到后端更新数据库
  $.ajax({
    url: '/your-update-url', // 替换成你的后端接口地址
    method: 'POST',
    data: {
      id: id,
      type: type,
      status: newStatus
    },
    success: function(response) {
      console.log('更新成功:', response);
    },
    error: function(xhr, status, error) {
      console.error('更新失败:', error);
      // 若更新失败，恢复原状态
      $icon.toggleClass('fa-on fa-off');
    }
  });
});
</script>