jQuery如何通过表单序列化数据匹配多data属性筛选优惠列表

• 先把表单序列化得到的数组转为筛选映射表：只保留用户勾选的选项，key为表单控件的name，value为选中值（复选框默认值是on，也可以自己设value属性匹配data属性的不同值）
• 遍历每个优惠项时，只要所有勾选的筛选条件都和对应data属性值匹配，就保留该优惠项，否则隐藏
• 无需修改筛选函数即可扩展新筛选维度：新增表单控件只要name和优惠项的data-xxx属性名保持一致即可自动适配

JavaScript #

$(function(){
  $('form').submit(function(e){
    e.preventDefault();
    var formData = $(this).serializeArray();
    filterOffers(formData);
  });
});

function filterOffers(attributes){
  // 转换为易使用的筛选条件对象
  const filterMap = {};
  attributes.forEach(item => {
    // 可根据业务需要调整值的类型转换规则，比如处理数字、字符串枚举值等
    filterMap[item.name] = item.value === 'on' ? true : item.value;
  });

  $(".offer").hide().filter(function() {
    const offerData = $(this).data();
    // 所有筛选条件全部匹配才保留当前优惠项
    for(const [key, requiredVal] of Object.entries(filterMap)) {
      if(offerData[key] !== requiredVal) {
        return false;
      }
    }
    return true;
  }).show();
}

HTML 扩展示例 #

新增筛选维度不需要修改JS逻辑，直接添加对应name的表单控件和data属性即可：

<form>
  <input type="checkbox" name="monthly" value="true" /> 月度付费
  <input type="checkbox" name="unlimited" value="true" /> 无限流量
  <!-- 新增校园专属筛选维度 -->
  <input type="checkbox" name="campus" value="true" /> 校园专属
  <input type="submit" />
</form>

<div class="offer" data-monthly="true" data-unlimited="false" data-campus="false">Offer 1</div>
<div class="offer" data-monthly="true" data-unlimited="true" data-campus="false">Offer 2</div>
<div class="offer" data-monthly="true" data-unlimited="true" data-campus="true">Offer 3</div>

同时勾选「月度付费」和「无限流量」时，会匹配到Offer2、Offer3展示；如果额外勾选「校园专属」，则只有Offer3展示，符合业务预期。

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