如何将生成的字符串作为有效条件整合进jQuery Filter？

嘿，我看你在尝试用动态生成的字符串作为jQuery Filter的判断条件，结果发现代码完全不工作对吧？这问题我之前也踩过坑，核心原因很简单：你把逻辑判断拼成了字符串，但JavaScript不会自动把字符串解析成可执行的布尔表达式——它只会把这个字符串当成“真值”，所以你的过滤逻辑完全失效了。

咱们来一步步修正这个问题，先看最安全可靠的解决方案：

直接用函数封装判断逻辑（推荐） #

别再拼字符串了，直接写一个判断函数，专门用来检查某个元素是否符合你的过滤规则。这样代码更清晰，也不会有字符串解析的问题：

const elements = 3;
let foundMatch = false;
// 假设这是你的过滤数据，根据实际情况调整
const filterData = { stops: [1, 2, 3] };

// 定义判断函数：传入一个DOM元素，返回是否符合过滤条件
const meetsFilterRequirements = (element) => {
  for (let i = 0; i < elements; i++) {
    // 获取当前segment的stops数据
    const segmentStops = $(element).find(`.segment:eq(${i})`).data('stops');
    // 只要有一个segment不满足条件，直接返回false
    if (segmentStops > filterData.stops[i]) {
      return false;
    }
  }
  // 所有条件都满足，返回true
  return true;
};

// 结合单选框状态使用过滤逻辑
// 比如检查某个元素是否符合条件
const targetElement = $('.some-element'); // 替换成你要检查的元素
foundMatch = foundMatch || $("input[type='radio']:eq(0)").is(":checked") && meetsFilterRequirements(targetElement);

// 如果是要批量过滤元素（比如用jQuery的filter方法）
const filteredElements = $('.your-target-class').filter(function() {
  // 这里的this就是当前遍历到的DOM元素
  return meetsFilterRequirements(this);
});

为什么这个方法更好？ #

• 没有字符串拼接的麻烦，逻辑一目了然，后期维护也方便
• 完全避免了字符串解析带来的潜在安全风险（比如如果过滤数据是用户输入的，拼字符串可能导致代码注入）
• 性能也比字符串转函数的方式更高

如果你一定要用字符串转函数的方式（不推荐） #

如果因为某些特殊需求，必须用字符串生成逻辑，那你可以把字符串转成可执行的函数，但一定要注意安全（确保filterData和生成的字符串是可信的，避免XSS风险）：

const elements = 3;
let line = "";
for (let i = 0; i < elements; i++) {
  line += "$(element).find('.segment:eq(" + i + ")').data('stops') <= filterData.stops[" + i + "] && ";
}
// 去掉字符串末尾多余的" && "
line = line.slice(0, -4);

// 用Function构造函数把字符串转成可执行函数
// 参数分别是：函数的参数名，函数体字符串
const filterFunction = new Function('element', 'filterData', `return ${line}`);

// 使用这个函数
const targetElement = $('.some-element');
const filterData = { stops: [1, 2, 3] };
const isMatch = filterFunction(targetElement[0], filterData); // 注意要传DOM元素，不是jQuery对象

// 结合单选框逻辑
foundMatch = foundMatch || $("input[type='radio']:eq(0)").is(":checked") && isMatch;

针对你的场景补充说明 #

在你的场景里，应该把过滤逻辑和jQuery的DOM操作结合起来，比如当单选框选中时，显示符合条件的元素：

// 假设你要过滤的是.connection类的元素
$("input[type='radio']").on('change', function() {
  if ($("input[type='radio']:eq(0)").is(":checked")) {
    const elements = 3;
    const filterData = { stops: [1, 2, 3] }; // 替换成你的实际过滤数据
    
    $('.connection').hide().filter(function() {
      for (let i = 0; i < elements; i++) {
        const stopCount = $(this).find(`.segment:eq(${i})`).data('stops');
        if (stopCount > filterData.stops[i]) {
          return false;
        }
      }
      return true;
    }).show();
  } else {
    // 其他单选框选中时显示所有元素
    $('.connection').show();
  }
});

这样就能实现你想要的动态过滤效果了。

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