jQuery下一个和之前的JSON数据

时间:2016-08-01 08:29:31

标签: javascript jquery

我目前正在使用HTML,CSS和jQuery进行小型互动 - 没什么特别的。

我有一个成功从json文件中获取问题数据的函数,但是当单击next或previous时,按钮函数似乎没有触发并从数组中获取下一个问题数据。

对此的任何和所有帮助都将不胜感激。

谢谢。

HTML

<div class="two">
  <h2>Question 1</h2>
  <h3></h3>
  <ul class="anwsers">
  </ul>
  <ul class="controls">
    <li class="back">
      <button>Back</button>
    </li>
    <li class="next">
      <button>Next</button>
    </li>
  </ul>
</div>

JS

function questions(){
  var data = [];
  var index = 1;

  function question() {
    $(".two h3").html(data[index].question);
  }

  $.ajax({
    url: '../json/data.json',
    type: 'get',
    dataType: 'json',
    success: function(json) {
      data = json;
      question();
    }
  });

  $('.two li.next button').on('click', function(index){
    console.log(index);
    if (index < data.length - 1) {
      index += 1;
      question();
    }
  });
  $('.two li.back button').on('click', function(index){
    console.log('Prev');
    if (index > 0) {
      index -= 1;
      question();
    }
  });

}

JSON

{
  "1": {
    "question": "Which one of the five is least like the other four?",
    "values": ["Snake", "Rat", "Lion", "Pig", "Cow", "Goat"],
    "answer": "Snake"
  },
  "2": {
    "question": "Which number should come next in the series?<br/>1 - 1 - 2 - 3 - 5 - 8 - 13",
    "values": ["8", "13", "21", "26", "31"],
    "answer": "21"
  },
  "3": {
    "question": "Which one of the five choices makes the best comparison?<br/>PEACH is to HCAEP as 46251 is to",
    "values": ["25641", "26451", "12654", "51462", "15264"],
    "answer": "15264"
  }
}

5 个答案:

答案 0 :(得分:0)

var data = [];函数中声明questions()。让它全球化

答案 1 :(得分:0)

像这样改写:

var data = []; var index = 0;

function question() {
    if(data[index] != undefined)
    {        
        $(".two h3").html(data[index].question); 
    }
}

function questions() {
    $.ajax({
        url: '../json/data.json',
        type: 'get',
        dataType: 'json',
        success: function(json) {
            data = json;
            question();
        }
    });    
}

$('.two li.next button').on('click', function() {
    console.log(index);
    if (index < data.length - 1) {
        index += 1;
        // enabling the buttons would be useful here
        question();
    } else {
        alert("No more questions");
    }
}); 

$('.two li.back button').on('click', function() {
    console.log('Prev');
    if (index > 0) {
        index -= 1;
        question();
    } else {
        alert("This is the first one.");
    } 
});

答案 2 :(得分:0)

从click even函数中删除index参数,因为click事件处理程序中的1st参数包含偶数数据。

因为&#34;索引&#34;在这个功能下是直接可行的:

 $('.two li.next button').on('click', function(){
    console.log(index);
  });
  $('.two li.back button').on('click', function(){
console.log(index);
  });

答案 3 :(得分:0)

尝试以下代码

  $.ajax({
    url: '../json/data.json',
    type: 'get',
    dataType: 'json',
    success: function(json) {
      data = json;
      $.each(data,function(i,v){
          var answ = '';
          $.each(v.values,function(x,t){ answ +='<li>'+t+'</li>'; });
         $('body').append('
<div class="two" style="display:none;"><h2>Question '+i+'</h2><h3 style="display:none;">'+v.question+'</h3><ul class="anwsers">'+answ+'</ul>
  <ul class="controls">
    <li class="back">
      <button>Back</button>
    </li>
    <li class="next">
      <button>Next</button>
    </li>
  </ul>
</div>');
      });
      $('.two:first').show();
    }
  });

  $('body').on('click','.two li.next button', function(index){
   $(this).closest('.two').hide();
   if($(this).closest('.two').is('.two:last')) {
    $('.two:first').show();
   } else {
    $(this).closest('.two').next().show();
   }
  });
  $('body').on('click','.two li.back button', function(index){
   $(this).closest('.two').hide();
   if($(this).closest('.two').is('.two:first')) {
    $('.two:last').show();
   } else {
    $(this).closest('.two').prev().show();
   }
  });

演示:https://jsfiddle.net/9crboc3b/

答案 4 :(得分:-1)

struct Polygon a

您可以将功能(索引)更改为正常的功能(事件)