显示最后检查 + 两个（来自数组）

Posted 2023-05-09

【中文标题】显示最后检查 + 两个（来自数组）

【英文标题】：Show last checked + two more (from array)

【发布时间】：2020-09-12 01:07:39

【问题描述】：

我有 20 个复选框从 JSON 文件中提取到数组中的调查问卷。

当一个项目被选中时，我将问题值推送到一个数组 [1,3] 中，该数组也存储在一个 cookie 中——因此当用户返回时，问题 1 + 3 仍然处于选中状态。

var questions = ["1", "2", "3" ... "20"];

jQuery(this).change(function() 
    var question_value = jQuery(this).val();

    if (jQuery(this).is(':checked')) 
        Cookies.set('completed', questions_completed);
        questions_completed.push(question_value);
     else 
        // splice/remove the item from the array    
    
);

var questions_completed = [1, 3]; // stores checked/completed questions number

我想要做的是一次显示 3 个复选框（不是全部 20 个）。

最后一个问题出现在顶部（选中），然后从列表中再出现两个（未选中），直到所有问题都完成。

我不知道如何正确处理这个问题 - 我需要将完成的数组与问题数组进行比较，但在循环中创建多个循环时我似乎无法做到这一点。

【问题讨论】：

您能否在此处使用jsfiddle 或snippet 为此创建一个small demo，以显示您目前的实现。

【参考方案1】：

要获得未回答的问题，您可以使用两个数组的差异，如下所示：

let questions = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let answered = [1, 5, 6, 9];

function getUnansweredQuestions(n = 3)
  let unanswered = questions.filter(x => !answered.includes(x));
  
  if(typeof n == "number" && n > 0)
    unanswered = unanswered.slice(0, n);
  
  
  return unanswered;


console.log(getUnansweredQuestions());

要获得最后一个回答的问题和接下来的两个未回答的问题，您可以保存最后回答的问题并将其添加到未回答的问题中：

let last_answered = null;

jQuery(this).change(function() 
    var question_value = jQuery(this).val();
    // ...
    last_answered = question_value;
);

let questions = getUnansweredQuestions(2).push(last_answered);

请注意，如果您想在用户取消选中您的一个问题时跟踪订单，请使用一个值 last_answered 的数组 instad。然后，您可以按照回答的顺序添加问题。 （目前您的questions_completed 就是这样，如果您不更改顺序。这意味着您可以简单地使用questions_completed[-1] 或questions_completed[questions_completed.length - 1] 来解决最后一个回答的问题。）

有了这个，您似乎可以提出问题：

let json_questions = 1: "A?", 2: "B?", 3: "C?", 4: "D?", 5: "E?", 6: "F?", 7: "G?"
let questions = Object.keys(json_questions);
let answered = [];
let questions_completed = [];

function getUnansweredQuestions(n)
  let unanswered = questions.filter(x => !questions_completed.includes(x));
  
  if(typeof n == "number" && n > 0)
    unanswered = unanswered.slice(0, n);
  
  
  return unanswered;


function createQuestion(id, label, value, checked)
  return ("<div class='question'>" + 
      "<label for='" + id + "'>" + 
        label + 
      "</label>" + 
      "<input " + 
        "value='" + value + "' " + 
        "type='checkbox' " + 
        "id='" + id + "' " + 
        "class='question' " + 
        (checked ? " checked='checked'" : "") + 
        " />" + 
    "</div>");


function createQuestions()
  let n = 3;
  let html = "";
  if(questions_completed.length > 0)
    let last = questions_completed[questions_completed.length - 1];
    html += createQuestion(last, json_questions[last], last, true);
    n--;
  
  
  let ask = getUnansweredQuestions(n);
  for(let i = 0; i < ask.length; i++)
    html += createQuestion(ask[i], json_questions[ask[i]], ask[i], false);
  
  
  $(".questions").html(html);


$(document).ready(function()
  $(document).on("change", ".question", function()
      var question_value = $(this).val();
      if ($(this).is(':checked')) 
          // Cookies.set('completed', questions_completed);
          questions_completed.push(question_value);
       else 
        let i = questions_completed.indexOf(question_value);
        if(i >= 0)
          questions_completed.splice(i, 1);
        
      
    createQuestions();
  );
  createQuestions();
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="questions"></div>