javascript - 如何在多个按钮 Onclick 上将 JSON 与数据属性匹配

Question

我需要一些帮助来尝试 JSON、数据属性和 onclick HTML 函数。

我有一个底部菜单，其中包含带有“数据日”属性(1、2、3 ...)的“徽章”按钮列表，以及我从 JSON 数据文件中获取的顶部卡片库。

每次用户点击徽章按钮时，我希望 JS 获取相应的 JSON 类别，以便 (JSON) "day": n === "data-day= n"(HTML)。

所以主要有两件事要添加到这段代码中:

1. 让 JSON 值 cardlibrary.cards[i].day 与 HTML 数据属性 data-day 匹配(我现在保留 1 值)，
2. 在每个“徽章”按钮上添加一个onclick触发函数，以便在选择按钮时刷新卡库数据。

如果有更好的方法来解决这个问题，我愿意接受建议! (我是 JS/JSON 的新手，所以我的知识非常有限)。

提前致谢!

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState === 4 && xhr.status === 200) {
  var cardlibrary = JSON.parse(xhr.responseText);
  var statusHTML = '<ul class="libraryCard-container">';
  
  for (var i=0; i<cardlibrary.cards.length; i ++) {
    
    //If selected card data is equal to a data attribute 
    if (cardlibrary.cards[i].day === 1)) {
      statusHTML += '<li><h3>';
      statusHTML += cardlibrary.cards[i].title;
      statusHTML += '</h3></li>';
    } 
    
  } // end for loop

  statusHTML += '</ul>';
  document.getElementById('libraryList').innerHTML = statusHTML;
}
};
xhr.open('GET', 'js/json/cards.json');
xhr.send();


//From separate cards.json file
{
  "cards": [{
      "day": 1,
      "title": "The Netherlands",
    }, {
      "day": 1,
      "title": "Germany",
    }, {
      "day": 2,
      "title": "France",
    }
}

<!-- Cards Library corresponding to selected Badge below -->
<div id="libraryList"></div>

<!-- Badges Menu beneath the card library-->
<div class="badgeLibrary">
  <ul>
    <li><button class="badge" data-day="1"></li>
    <li><button class="badge" data-day="2"></li>
    <li><button class="badge" data-day="3"></li>
  </ul>
</div>

Answer 1

首先，我认为你应该为徽章按钮添加一个事件监听器:代码:

document.getElementsByClassName('badgeLibrary')[0].onclick = function(e){
    var target = e.target;
    if (target.tagName == 'BUTTON') {
      var dataDay = target.getAttribute('data-day');
      obtainData(dataDay);//send request
    }
  }

然后我把你的xhr打包成一个函数:代码:

function obtainData(dataDay){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
    if(xhr.readyState === 4 && xhr.status === 200) {
    var cardlibrary = JSON.parse(xhr.responseText);
      var statusHTML = '<ul class="libraryCard-container">';

      for (var i=0; i<cardlibrary.cards.length; i ++) {

        //If selected card data is equal to a data attribute
        if (cardlibrary.cards[i].day == dataDay) {
          statusHTML += '<li><h3>';
          statusHTML += cardlibrary.cards[i].title;
          statusHTML += '</h3></li>';
        }

      } // end for loop

      statusHTML += '</ul>';
      document.getElementById('libraryList').innerHTML = statusHTML;
    }
    };
    xhr.open('GET', 'js/json/cards.json');
    xhr.send();
  }