如何使用jQuery对比数组数值，小于range输入值时隐藏对应div

• 原有代码直接将完整的价格数组与滑块数值做比较，不符合JS语法逻辑，也无法对应每个独立的.col元素做单独判断
• 不需要先把所有价格存入数组再统一处理，直接遍历元素时同步判断即可实现需求

// 用input事件替代change，拖动滑块时实时触发，体验更好
$('#myRange').on('input', function() {
  // 获取滑块当前值并转为整数
  const sliderVal = parseInt($(this).val());
  // 遍历所有.col容器
  $('.col').each(function() {
    // 取当前容器内的价格数值
    const currentPrice = parseInt($(this).find('.price').text());
    // 价格小于滑块值时隐藏，否则显示
    currentPrice < sliderVal ? $(this).fadeOut() : $(this).fadeIn();
  });
});

原有HTML代码无需修改，直接替换JS部分即可运行。

• 替换change事件为input事件：change事件仅在滑块拖动结束松开鼠标时触发，input事件可以在拖动过程中实时响应，交互体验更流畅
• 直接遍历.col元素，每次遍历获取对应子元素.price的数值和滑块值做对比，单独控制当前遍历到的.col的显隐，完全匹配需求

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