Как совместить JSON с атрибутом данных на нескольких кнопках Onclick

Мне нужна небольшая помощь при попытке JSON, атрибутах данных и onclick HTML-функциях.Как совместить JSON с атрибутом данных на нескольких кнопках Onclick

У меня есть нижнее меню со списком «значков» с атрибутами «день-день» (1,2,3 ...) и библиотекой карт сверху, которую я извлекаю из файла данных JSON ,

Каждый раз, когда пользователь нажимает кнопку значка, я бы хотел, чтобы JS выбрала соответствующую категорию JSON, чтобы (JSON) «день»: n === «data-day = n» (HTML).

Таким образом, есть в основном две вещи, чтобы добавить к этому коду:

имеют значение cardlibrary.cards JSON [я] · сутки совпадают с данными HTML атрибутов данных день (который я оставил значение 1 на данный момент),
Включите функцию триггера 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>

источник

2016-11-21 Issey

первого, я думаю, вы должны добавить слушатель событий для кнопки бейджа: кода:

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

источник

2016-11-21 02:49:31 JKong

Спасибо так много! Это было очень ясно и определенно помогло мне понять, что вы сделали. Кажется очевидным сейчас, но я бы не подумал использовать прослушиватель событий так, как вы это делали. Ты восхитителен! Еще раз спасибо. – Issey

Вот ваш пример:

это приложение с использованием jquery и dot.js для визуализации данных из json в кнопках с data-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>

Я надеюсь, что в этом примере вы понимаете, как программировать ваше приложение

источник

2016-11-21 03:04:47

Спасибо за помощь! Я немного менее знаком с jQuery, поэтому мне требуется больше времени для чтения, но это помогло прояснить некоторые вещи! :) – Issey

Как совместить JSON с атрибутом данных на нескольких кнопках Onclick

ответ

Смежные вопросы