【问题标题】:Structure to store data存储数据的结构
【发布时间】:2017-05-17 04:47:19
【问题描述】:

对于 javascript,我应该使用什么结构来存储数据?

我为用户编写了一个测试。用户看到问题和 3 张图片。他点击一些图片,然后根据他的选择,看到描述他选择的 cmets 并获得积分。

如果有很多问题,我应该以什么结构存储问题数据。如果选项数量不同怎么办?

var question_1 = {
    text:"Which picture shows the church?",
    images: ["http://ebubab.msk.ru/images/intro/geo.jpg", 
    				 "http://ebubab.msk.ru/images/intro/neznakomka.jpg", 
             "http://ebubab.msk.ru/images/intro/ruka.jpg"],
    comments: ["That's right, the church is where there are domes.", 
              "Are you blind? There, the girls are with a guy. There is no church there.", 
              "Clear your eyes. There's a leaf with someone's text, not a church."],
    points: [1, 0, 0],
};

var question_2 = {
    text:"And where is the angel?",
    images: ["http://ebubab.msk.ru/images/intro/bereza.jpg",
             "http://ebubab.msk.ru/images/intro/sponsor.jpg",
             "http://ebubab.msk.ru/images/intro/pismo.jpg"],
    comments: ["Like this? A bearded man for you is an angel or what?", 
              "Since when did curly-headed uncles become angels?", 
              "All right. You found our angel."],
    points: [0, 0, 1],
};

var question_3 = {
    text:"Where is the picture on which there are no womanizer?",
    images: ["http://ebubab.msk.ru/images/intro/babnik.jpg",
             "http://ebubab.msk.ru/images/intro/plakat.jpg",
             "http://ebubab.msk.ru/images/intro/stishki-mini.jpg"],
    comments: ["You are mistaken. A guy surrounded by a bunch of girls - this is just a womanizer.", 
              "Here it is! Indeed, something interesting is selected here, but there are no womanizer here.", 
              "Not true. A stylish man surrounded by elegant girls is a womanizer."],
    points: [0, 1, 0],
};

var questions = [question_1, question_2, question_3];
              
var number = 0;

var scores = 0;

document.getElementById("question").innerHTML = questions[number].text;
document.getElementById("img_1").src = questions[number].images[0];
document.getElementById("img_2").src = questions[number].images[1];
document.getElementById("img_3").src = questions[number].images[2];

$(function() {

  $("#button").hide();

  $("#img_1").click(function() {
    $("#img_1, #img_2, #img_3, #question").hide();
    $("#result, #button").show();
    document.getElementById("result").innerHTML = questions[number].comments[0];
    scores += questions[number].points[0];
    number ++;
  });
  
  $("#img_2").click(function() {
    $("#img_1, #img_2, #img_3, #question").hide();
    $("#result, #button").show();
    document.getElementById("result").innerHTML = questions[number].comments[1];
    scores += questions[number].points[1];
    number ++;
  });
  
  $("#img_3").click(function() {
    $("#img_1, #img_2, #img_3, #question").hide();
    $("#result, #button").show();
    document.getElementById("result").innerHTML = questions[number].comments[2];
    scores += questions[number].points[2];
    number ++;
  });
  
  $("#button").click(function() {
    	
    if (number < questions.length) {
    	$("#result, #button").hide();
    	$("#question, #img_1, #img_2, #img_3").show();
    	document.getElementById("question").innerHTML = questions[number].text;
			document.getElementById("img_1").src = questions[number].images[0];
			document.getElementById("img_2").src = questions[number].images[1];
			document.getElementById("img_3").src = questions[number].images[2];
    } else {
    	$("#result, #button").hide();
      $("#result").show();
     	document.getElementById("result").innerHTML = "Your score: " + scores + "/" + questions.length;
    	}
  });  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="question"></p>

<p><img id="img_1" src="" /></p>

<p><img id="img_2" src="" /></p>

<p><img id="img_3" src="" /></p>

<p id="result"></p>

<button id="button">Next</button>

【问题讨论】:

    标签: javascript jquery oop


    【解决方案1】:

    我会将答案分组到对象中,而不是使用 3 个单独的数组。

    var questions = [
      {
        text:"Which picture shows the church?",
        answers: [
          { image: "", comment: "", points: 1 },
          { image: "", comment: "", points: 1 },
          { image: "", comment: "", points: 1 }
        ]
      },
      {
        text:"Which picture shows the house?",
        answers: [
          { image: "", comment: "", points: 1 },
          { image: "", comment: "", points: 1 },
          { image: "", comment: "", points: 1 }
        ]
      }
    ];
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-10-09
      • 1970-01-01
      • 2014-05-16
      • 2013-06-28
      相关资源
      最近更新 更多