如何为HTML列表项绑定事件监听器传值，及select组件值跨作用域获取

一、给<li>设置点击事件并获取内容赋值给limit #

完全可以给<li>绑定点击事件监听器，获取点击内容后赋值给目标变量。具体实现如下：

示例代码 #

HTML结构

<ul class="dropdown-list">
  <li>10条</li>
  <li>20条</li>
  <li>50条</li>
</ul>

JavaScript（jQuery）

$(function() {
  // 在$(function())作用域内声明limit变量
  let limit = 10;

  // 给目标<li>绑定点击事件
  $('.dropdown-list li').click(function() {
    // 获取点击的<li>文本内容，trim()去除多余空格
    const clickedText = $(this).text().trim();
    // 提取数字并赋值给limit（如果文本带描述）
    limit = parseInt(clickedText);
    // 验证结果
    console.log('当前limit值：', limit);
  });
});

二、<select>组件传递data-number到$(function())内的limit变量 #

你已经实现了change事件获取data-number，要传递到$(function())作用域的limit变量，核心是利用闭包特性——事件回调函数能访问外部作用域的变量，直接赋值即可：

示例代码 #

HTML结构

<select id="limit-select">
  <option data-number="10" selected>显示10条</option>
  <option data-number="20">显示20条</option>
  <option data-number="50">显示50条</option>
</select>

JavaScript（jQuery）

$(function() {
  // 作用域内声明limit变量
  let limit = 10;

  $('#limit-select').change(function() {
    // 获取选中<option>的data-number值
    const selectedNum = $(this).find('option:selected').data('number');
    // 直接赋值给外部作用域的limit变量
    limit = selectedNum;
    // 验证结果
    console.log('当前limit值：', limit);
  });

  // 后续该作用域内的其他逻辑可直接使用更新后的limit
  function doSomething() {
    console.log('使用limit执行操作：', limit);
  }
});

关键说明 #

只要limit变量是在$(function())作用域内声明的（而非回调函数内部），事件回调作为闭包就有权访问并修改这个变量的值，修改后的值会同步到整个$(function())作用域中，后续逻辑可直接使用更新后的limit。

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