jQuery为父级card div设置data-order属性不生效问题求助

修改说明 #

你代码的核心问题是遍历.card时的选择器范围错误，以及排序逻辑未在数据更新后重新触发，具体修改点如下：

• 遍历每张card时，当前上下文的this就是.card元素本身，直接给它设置data-order即可，使用$(".card")会选中所有card，导致所有元素的属性被最后一次计算的sum覆盖
• 排序逻辑目前仅在页面加载时执行一次，每次checkbox状态更新、sum重算完成后需要重新执行排序才能生效
• 循环内的$(this).find(".card")属于无效查找，当前card的子元素不存在card类元素

修改后完整JS代码 #

// 全选触发器
$(".filter #sport").change(function(){
    var status = $(this).is(":checked");
    $(".sport").prop("checked",status);
});

$(".filter #relax").change(function(){
    var status = $(this).is(":checked");
    $(".relax").prop("checked",status);
});

$(".filter #family").change(function(){
    var status = $(this).is(":checked");
    $(".family").prop("checked",status);
});

// 分数计算&排序逻辑
function reCalcAndSort(){
  $("#risultatiquiz .card").each(function() {
    var sum = 0.00;
    $(this).find('.check-plus:checked').each(function() {
         sum += parseFloat($(this).val().trim()) || 0;
    });
    // 给当前card设置data-order，就是你要的核心逻辑
    $(this).attr('data-order', sum);
    $(this).find(".risultato").html('<span>Punteggio: </span>' + sum );
    $(this).find(".risultato").append('<br> data-order=' + sum );
  });
  // 重新排序并更新DOM
  var $sorted_items = getSorted('#risultatiquiz .card', 'data-order');
  $('#risultatiquiz').html($sorted_items);
}

// 排序工具函数
function getSorted(selector, attrName) {
    return $(
      $(selector).toArray().sort(function(a, b){
          // 如果需要支持小数可以把parseInt换成parseFloat
          var aVal = parseInt(a.getAttribute(attrName)),
              bVal = parseInt(b.getAttribute(attrName));
          return aVal - bVal;
      })
    );
}

// 绑定checkbox变更事件
$(".filter input").change(function(){
  reCalcAndSort();
});

// 页面初始化执行一次排序
reCalcAndSort();

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