Question

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

我有一个底部菜单，其中包含＆＃34;徽章＆＃34;带有＆＃34;数据日＆＃34;的按钮属性（1,2,3 ...），以及我从JSON数据文件中获取的顶部卡片库。

每次用户点击徽章按钮时，我都希望JS获取相应的JSON类别，以便（JSON）＆＃34; day＆＃34;：n ===＆＃34; data-day = n＆＃34; （HTML）。

因此，此代码主要有两件事要添加：

让JSON值cardlibrary.cards [i] .day与HTML数据属性data-day匹配（我现在留下1个值），
在每个＆＃34;徽章上添加onclick触发功能＆＃34;选择按钮时刷新卡库数据的按钮。

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

提前致谢！

＆＃13;

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",
    }
}

＆＃13;

<!-- 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>

＆＃13;

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();
  }

Answer 2

这是你的例子，

这个应用程序使用jquery和dot.js从按钮中的json渲染数据数据-ID。

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dot/1.1.0/doT.js"></script>

    </head>
    <body>
            <div id="container"></div>

            <!-- Template Javascript - HTML !-->
            <script id="templateButtons" type="text/x-dot-template" >
                {{~it.detalle :value:index}}
                <button class='button' data-id="{{=value.id}}">Button {{=value.id}} </button>
                {{~}}
            </script>

            <script>
              // on ready document in jquery
                $(function() {

                  // json data
                    var data =  [
                        {
                            "id": 0,
                            "title": "The Netherlands"
                        }, 
                        {
                            "id": 1,
                            "title": "Germany"
                        }, 
                        {
                            "id": 2,
                            "title": "France"
                        }
                    ];

                 // Render Template
                    // Get HTML from Template in Jquery
                    var template = $("#templateButtons").html();
                    // Generate HTML for all rows in json
                    var html = doT.template(template)({detalle:data});
                    // Put HTML in container div
                    $("#container").html(html);

                    // Event for buttons
                    $(".button").click(function() {
                        // Get data id
                        var id = $(this).data("id");
                        // show text for json id
                        alert("this is:" + data[id].title);
                    });


                });            
            </script>
    </body>


</html>

我希望通过这个例子，您了解如何编写应用程序

如何在多个按钮上点击JSON和数据属性

2 个答案: