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

Question

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

HTML 代码如下所示：

<div class="inner cover">

  <ol type="A">
    <li><span id="full_tweet"></span></li><br>
    <li><span id="tweet_no_emoji"></span></li><br>
  </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>

我的 JSON 文件如下所示：

{ "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 "
   }
  ]
}

我的脚本：

$.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

这当然是将所有项目附加到列表中，但我正在寻找一种方法来附加第一对，然后在每个 "submission" 处用下一对更新列表。

如有任何帮助，我将不胜感激。

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 页面列表中显示了第一对；然后每次单击 "Submit" 按钮时，列表都会更新为我的文件的下一个元素。单击“提交”按钮到达最后一个元素后，我将被重定向到另一个页面。

$.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 有序列表

jQuery: Update a html ordered list with each object from a JSON array each time I press a submit button

javascript

jquery

json

html-lists

submit-button