Question

我要做的是从同一个组ID中获取两个数据组得分值并将它们加在一起：

到目前为止我更新的版本：

示例HTML：

<div class="quiz-block-container">
  <div class="quiz-block-question" data-group-id="1" data-group-score="2">
  </div>
  <div class="quiz-block-question" data-group-id="1" data-group-score="3">
  </div>

  <div class="quiz-block-question" data-group-id="2" data-group-score="1">
  </div>
  <div class="quiz-block-question" data-group-id="2" data-group-score="3">
  </div>

  <div class="quiz-block-question" data-group-id="3" data-group-score="3">
  </div>
  <div class="quiz-block-question" data-group-id="3" data-group-score="1">
  </div>

  <div class="quiz-block-question" data-group-id="4" data-group-score="1">
  </div>
  <div class="quiz-block-question" data-group-id="4" data-group-score="1">
  </div>
</div>

我要做的是用类＆＃34; quiz-block-question＆＃34;循环遍历块。获取data-group-id，然后按ID返回每个组的数据组分数，这样我就可以将它们一起添加到该组中的那些值的总分中，并为每个group-id执行此操作。

我一直在玩的JS例子以及他们当前的状态，但我认为我已经离开了更接近工作的东西，但这就是我现在所拥有的。

JS（1）

$('.quiz-block-question').each(function() {
  var id = $(this).data('group-id');
  var score = $(this).data('group-score');
    var i = 0;

  $("[data-group-id='" + id + "']").each(function(index) {
    if(++i > 2) {
      return false;
    }
    //$(this).find('.group-id').text(id);
    //console.log("group: " + $(this).data('group-id'));
    //$(this).find('.group-score').text(score);
    //console.log("group score: " + $(this).data('group-score'));
    var first = $(this).data('group-score')[1];
    console.log(first);
    var second = $(this).data('group-score')[2];
    var total = first + second;
    $('.results').append("total:" + total);

  });
  //return false
});

JS（2）

$('.quiz-block-question').each(function(i) {
  var groupID = $(this).data("group-id");
  if ($(this).data('group-id') == i + 1) {
    //console.log(this);
    $("[data-group-id='"+i+"']").each(function() {
      console.log(this);
      var questionGroupID = $(this).data('group-id');
      $(this).each(function() {
        console.log("group score: "+$(this).attr('data-group-score'));
      });
    });
  }
});

Answer 1

听起来你只想进行.map/reduce操作。这将返回一个对象/值对为id / total。

var q = document.querySelectorAll('.quiz-block-question');

var res = Array.from(q, el => 
  ({id: el.dataset.groupId, score: +el.dataset.groupScore})
).reduce((obj, d) =>
  Object.assign(obj, {[d.id]: (obj[d.id] || 0) + d.score})
, {});

console.log(res);

<div class="quiz-block-container">
  <div class="quiz-block-question" data-group-id="1" data-group-score="2">
  </div>
  <div class="quiz-block-question" data-group-id="1" data-group-score="3">
  </div>

  <div class="quiz-block-question" data-group-id="2" data-group-score="1">
  </div>
  <div class="quiz-block-question" data-group-id="2" data-group-score="3">
  </div>

  <div class="quiz-block-question" data-group-id="3" data-group-score="3">
  </div>
  <div class="quiz-block-question" data-group-id="3" data-group-score="1">
  </div>

  <div class="quiz-block-question" data-group-id="4" data-group-score="1">
  </div>
  <div class="quiz-block-question" data-group-id="4" data-group-score="1">
  </div>
</div>

jQuery循环遍历元素，按data-id排序并从具有匹配data-id的元素中获取值

1 个答案: