使用JQuery实现点击.page类元素获取data-current值的技术问题

解决方案：点击.page元素获取data-current属性值 #

没问题，这是个很常见的DOM交互需求，我们可以通过jQuery的事件委托来优雅实现，同时兼顾静态和动态生成的元素。

1. 示例HTML结构

首先确保你的HTML结构包含目标容器和带属性的.page元素：

<div id="data-total1">
  <div class="page" data-current="1">点击我看页码1</div>
  <div class="page" data-current="2">点击我看页码2</div>
  <div class="page" data-current="3">点击我看页码3</div>
</div>

2. jQuery事件委托代码

接下来编写jQuery代码，利用事件委托绑定点击事件并获取属性值：

$(document).ready(function() {
  // 把点击事件委托给父容器#data-total1
  $('#data-total1').on('click', '.page', function() {
    // 获取当前点击元素的data-current值（jQuery会自动转换数据类型）
    const currentValue = $(this).data('current');
    // 打印到控制台，你也可以替换成自己的业务逻辑
    console.log('当前data-current的值是：', currentValue);
    
    // 如果你需要字符串类型的结果，也可以用原生方法：
    // const currentValueStr = this.getAttribute('data-current');
  });
});

为什么用事件委托？

• 性能更优：不用给每个.page元素单独绑定事件，只绑定一次到父元素
• 支持动态元素：如果后续通过JavaScript动态添加新的.page元素到#data-total1里，这些新元素也能自动触发点击事件，不需要重新绑定

内容的提问来源于stack exchange，提问作者Ashok Charu