Question

我正在使用下一个/上一个按钮来显示数组的相应项目。我遇到两个问题...

1）加载页面后，我需要先单击前两次或下两次才能发生任何事情

2）例如，假设我的记录ID为10。如果我按“ next”五次以记录ID 15，则按“ previous”，而不是将我带到14，它将带我到ID16。如果我再按一次（和以后），则ID然后将正常减少。与上一个相同：如果我从ID 15开始并将前一个降至10，单击“下一个”会将我带到ID 9，而不是11。然后，随后单击“下一个”将正常增加ID。

希望这将有助于解释我的意思... https://jsfiddle.net/mjcs351L/

这使用了超级英雄API。您将需要自己的代码来进行测试，但是它是免费的，甚至不需要您注册：https://www.superheroapi.com/

谢谢您的指导。


var apiKey = "YOUR API";
var charID = Math.floor((Math.random() * 731) + 1);
var website = "https://www.superheroapi.com/api.php/" + apiKey + "/" + charID;
var req = new XMLHttpRequest();
req.open('GET', website, true);
req.setRequestHeader('Content-Type', 'application/json');

req.addEventListener('load', function() {
  var result = JSON.parse(req.responseText);
  getinfo();

  function getinfo() {
    document.getElementById('fullname').innerHTML = result.biography["full-name"];
    document.getElementById('name').innerHTML = result.name;
    document.getElementById('egos').innerHTML = result.biography["alter-egos"];
    document.getElementById('charID').innerHTML = result.id;
    document.getElementById('birth').innerHTML = result.biography["place-of-birth"];
    document.getElementById('height').innerHTML = result.appearance.height;
    document.getElementById('weight').innerHTML = result.appearance.weight;
    document.getElementById('gender').innerHTML = result.appearance.gender;
    document.getElementById('race').innerHTML = result.appearance.race;
    document.getElementById('eye').innerHTML = result.appearance["eye-color"];
    document.getElementById('hair').innerHTML = result.appearance["hair-color"];
    document.getElementById('occupation').innerHTML = result.work.occupation;
    document.getElementById('connections').innerHTML = result.connections["group-affiliation"];
    document.getElementById('relatives').innerHTML = result.connections.relatives;
    document.getElementById("pic").src = result.image.url;
    document.getElementById("pic").style.height = 300;
    document.getElementById("pic").style.width = 300;
  }



  function nextItem() {
    var test = charID + 1;
    var website = "https://www.superheroapi.com/api.php/" + apiKey + "/" + test;
    req.open('GET', website, true);
    req.setRequestHeader('Content-Type', 'application/json');
    req.addEventListener('load', function() {
      var result = JSON.parse(req.responseText);
      charID = test;
      getinfo();
    });
    req.send(null);
  }

  function prevItem() {
    var test = charID - 1;
    var website = "https://www.superheroapi.com/api.php/" + apiKey + "/" + test;
    req.open('GET', website, true);
    req.setRequestHeader('Content-Type', 'application/json');
    req.addEventListener('load', function() {
      var result = JSON.parse(req.responseText);
      charID = test;
      getinfo();
    });
    req.send(null);
  }


  document.getElementById('prev_button').addEventListener('click', function(e) {
    prevItem();
  });

  document.getElementById('next_button').addEventListener('click', function(e) {
    nextItem();
  });

  event.preventDefault();
});
req.send(null);

Answer 1

您应该尝试并遵循DRY（请勿重复），这使调试代码更加容易。我对代码进行了一些调整，以重新使用组件。

var apiKey = "YOUR API";
var charID = Math.floor((Math.random() * 731) + 1);

function fetchData(id) {
  id = id || charID;
  var website = "https://www.superheroapi.com/api.php/" + apiKey + "/" + id;
  var req = new XMLHttpRequest();
  req.open('GET', website, true);
  req.setRequestHeader('Content-Type', 'application/json');

  req.addEventListener('load', function() {
    var result = JSON.parse(req.responseText);
    getinfo(result);
  });
  req.send(null);
}

fetchData()

function getinfo(result) {
  document.getElementById('fullname').innerHTML = result.biography["full-name"];
  document.getElementById('name').innerHTML = result.name;
  document.getElementById('egos').innerHTML = result.biography["alter-egos"];
  document.getElementById('charID').innerHTML = result.id;
  document.getElementById('birth').innerHTML = result.biography["place-of-birth"];
  document.getElementById('height').innerHTML = result.appearance.height;
  document.getElementById('weight').innerHTML = result.appearance.weight;
  document.getElementById('gender').innerHTML = result.appearance.gender;
  document.getElementById('race').innerHTML = result.appearance.race;
  document.getElementById('eye').innerHTML = result.appearance["eye-color"];
  document.getElementById('hair').innerHTML = result.appearance["hair-color"];
  document.getElementById('occupation').innerHTML = result.work.occupation;
  document.getElementById('connections').innerHTML = result.connections["group-affiliation"];
  document.getElementById('relatives').innerHTML = result.connections.relatives;
  document.getElementById("pic").src = result.image.url;
  document.getElementById("pic").style.height = 300;
  document.getElementById("pic").style.width = 300;
}


function nextItem(ev) {
  ev.preventDefault();
  fetchData(++charID)
}

function prevItem(ev) {
  ev.preventDefault();
  fetchData(--charID)
}

document.getElementById('prev_button').addEventListener('click', prevItem);

document.getElementById('next_button').addEventListener('click', nextItem);

显示数组的下一个/上一个项目

1 个答案: