如何仅在多个模态框中的一个内执行JavaScript函数

嘿，我明白你的需求了——你有两个模态框#modal1和#modal2，现在想让你写的a(input)函数只在其中某一个模态框里的表单元素上执行对吧？这里有两种简单的实现方式，看你喜欢哪种：

方法1：调用时直接限定元素范围（无需修改原函数） #

你的函数本身是接收一组DOM元素来处理的，所以只要调用时只传入目标模态框内的input元素，就能自动限定执行范围，完全不用改原函数的代码。

比如想让函数只处理#modal1里的input：

// 只传#modal1内的所有input给函数a
const modal1Data = a($('#modal1 input'));

如果要切换到#modal2，就把选择器改成#modal2 input就行：

const modal2Data = a($('#modal2 input'));

这种方式最直接，适合不想改动现有函数逻辑的场景。

方法2：修改函数，让它支持指定模态框（更灵活） #

如果希望函数本身更“智能”，能直接关联模态框，可以稍微修改一下函数，让它接受模态框的选择器作为参数，自动在该模态框内查找input元素：

function a(modalSelector) {
  let sArray = {};
  // 只在传入的模态框内遍历input
  $(modalSelector).find('input').each(function() {
    const sKey = $(this).attr('name');
    const sValue = $(this).val();
    if (sKey) { // 过滤掉没有name属性的input，避免无效键
      sArray[sKey] = sValue;
    }
  });
  return sArray;
}

调用的时候就直接传模态框的ID选择器：

// 获取#modal1内的表单数据
const modal1Data = a('#modal1');
// 获取#modal2内的表单数据
const modal2Data = a('#modal2');

小优化：简化你的原函数逻辑 #

顺便提一句，你的原函数可以简化不少——不需要单独维护aKeys和aValues两个数组，直接在遍历的时候构建结果对象就行，代码更简洁高效：

// 简化后的原函数版本（适配方法1）
function a(input) {
  let sArray = {};
  $(input).each(function() {
    const sKey = $(this).attr('name');
    const sValue = $(this).val();
    if (sKey) {
      sArray[sKey] = sValue;
    }
  });
  return sArray;
}

这样既保留了原函数的功能，又减少了不必要的数组操作～

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