Question

我对jQuery，Javascript和DOM操作非常陌生。我正在尝试构建一个简单的界面来注释一系列的推文对。我将我的推文对作为对象存储在JSON数组中（大小为4100对）。我试图在列表中加载第一对，然后在每次单击“提交”类型按钮时使用下一对更新列表。

HTML代码如下：

{ "Pairs": [
  {
     "full_tweet": "RT @USER: GRAYSON DOLAN is the one who is in awe with her as the best in home \ud83c\udfe1 she was meant to be a family but I love \u2764\ufe0f th\u2026 ", 
     "tweet_no_emoji": "RT @USER: GRAYSON DOLAN is the one who is in awe with her as the best in home  she was meant to be a family but I love \u2764\ufe0f th\u2026 "
   }, 
  {
     "full_tweet": "RT @USER: @USER Hey Stella, would you please SIGN AND RT this \ud83d\udc36", 
     "tweet_no_emoji": "RT @USER: @USER Hey Stella, would you please SIGN AND RT this "
    }, 
  {
     "full_tweet": "I don't care what you think as long as its about me \ud83c\udfb6", 
     "tweet_no_emoji": "I don't care what you think as long as its about me "
   }
  ]
}

我的JSON文件如下：

$.getJSON('tweet_pairs3.json', function (data) {

  $.each(data.Pairs, function (i, Pairs) {
    var pair1 = ('<li><a href="#">' + Pairs.full_tweet + '</a></li>');
    $('#full_tweet').append(pair1);

    var pair2 = ('<li><a href="#">' + Pairs.tweet_no_emoji + '</a></li>');
    $('#tweet_no_emoji').append(pair2);
  }); //$.each(...)

}); //$.getJSON

我的剧本：

Given
When
Then

这当然是将所有项目附加到列表中，但我正在寻找的方法是附加第一对，然后在每次“提交”时使用下一对更新列表。

我将不胜感激。

Answer 1

试试这个

 <div class="inner cover">
  <ol type="A" id="full_tweet">

  </ol>  
  <ol type="A" id="tweet_no_emoji">

  </ol>  

  <form>
  <input type="radio" name="Class Tag" value="R">Redundant<br>
  <input type="radio" name="Class Tag" value="Non R">Non Redundant<br>
  <input type="radio" name="Class Tag" value="Non R + POS">Non Redundant + POS<br>
  <input type="submit" value="Submit">
  </form>

</div>


$.getJSON('tweet_pairs3.json', function (data) {
var pair1='';
var pair2='';
$.each(data.Pairs, function (i, Pairs) {
  pair1 += '<li><a href="#">' + Pairs.full_tweet + '</a></li>';
  pair2 += '<li><a href="#">' + Pairs.tweet_no_emoji + '</a></li>';   
});
$('#full_tweet').html(pair1);
$('#tweet_no_emoji').html(pair2);
});

Answer 2

即使我不确定此解决方案是否最佳，我找到了获得所需输出的方法。使用此代码，我得到的第一对显示在我的html页面列表中;然后每次点击＆＃34;提交＆＃34;按钮列表使用我的文件的下一个元素更新。通过单击“提交”按钮到达最后一个元素后，我被重定向到另一个页面。

$.getJSON('tweet_pairs3.json', function (data) {
  var pair1=[]; //I store the properties of the JSON in arrays so that I can get elements by indices
  var pair2=[];
      idx = 1;
  $.each(data.Pairs, function (i, Pairs) { //filling the empty arrays
    pair1.push(Pairs.full_tweet);
    pair2.push(Pairs.tweet_no_emoji);   
  }); //$.each(...)
  $('#full_tweet').html(pair1[0]); //appending only the first pair to the list
  $('#tweet_no_emoji').html(pair2[0]);

  $('#sub').on('click', function(e){

    e.preventDefault();
    $('#full_tweet').html(pair1[idx]); //changing list content starting from elements at index 1 in my arrays
    $('#tweet_no_emoji').html(pair2[idx]);

    idx += 1
    if (idx >= pair1.length) {
      window.location.href = "Zlast_page.html"; //once the index is equal to the array length if I click on the button I am redirected to a page stating that the task is complete
    } //if()

  }); //$('#sub').on

}); //$.getJSON*/

jQuery：每次按下提交按钮时，用JSON数组中的每个对象更新一个html有序列表

2 个答案: