Question

 <div class="filter hidden-xs hidden-sm hidden-md">
      <a href="?type=all" id="all">View All</a>
      <a href="?type=zoologist" id="zoologist">Zoologist</a>
      <a href="?type=hobbyist" id="hobbyist">Hobbyist</a>
      <a href="?type=judge" id="judge">Judge</a>
  </div>

<div id="accordion"></div>

JSON

 var JSONObject = [
    {
      "name": "Jonathan Suh",
      "type": "zoologist, hobbyist"
    },
    {
      "name": "William Philbin",
      "type": "judge, hobbyist"
    },
    {
      "name": "Allison McKinnery",
      "type": "hobbyist"
    }
  ];

Jquery的

 $('.filter a').on('click', function(e){

              e.preventDefault();
              var filter = $(this).attr('id');

              $.ajax({
                type: 'GET',
                url: 'http://path/to/example.json,
                dataType: 'json',
                data: {"type" : filter},
                cache: false,
                beforeSend: function(){
                  console.log('loading');
                },
                success: function(response){
                  console.log('success');
                  var details = '';
                  for (var key in response) {
                    if (response.hasOwnProperty(key)) {

                      details+='<h1 class="name">' + response[key]["name"] + '</h1>';
                      details+='<div class="accordion-content row">'+response[key]["gender"]'</div>';

                    }
                  }

                  $('#accordion').html(details).fadeIn();

                },
                error: function (jqXHR, textStatus, errorThrown) {
                  console.log('XHR ' + jqXHR);
                  console.log('status ' + textStatus);
                  console.log('error ' + errorThrown);
                },
                complete: function(){
                  console.log('finished all tasks');
                }

            });
       });

Js fiddle

使用$ .ajax并以某种方式显示手风琴内容。我无法解决两到三个问题。

首先考虑与window.location.search匹配，但最终尝试用id过滤。

你注意到我把数据：{“type”：filter}从json获取名称并与'filter'进行比较。它没有做任何事情。为什么？如何在json中按类型过滤并查找按类型过滤的所有信息？
首次加载页面时，它不会显示手风琴区域中的所有内容。问题是所有json都是通过$ .ajax处理的。有没有办法显示$ .ajax以外的所有内容？但我不想重复所有内容，如果$ .ajax

Answer 1

由于您似乎没有在任何地方发送“数据”，因此您只需过滤结果/响应。

另外，为了轻松解决你的第二个问题 - 你可以把ajax放在一个函数中，并在“click”和“page load”上调用这个函数。

function loadMyJson(filter) {

 $.ajax({
    type: 'GET',
    url: 'http://path/to/example.json',
    dataType: 'json',
    cache: false,
    beforeSend: function() {
        console.log('loading');
    },
    success: function(response) {
        console.log('success, filtering response...');

        //Filter the returned json by "filter"            
        var filteredJson = $(response).filter(function (i,n) { 
            return n.type === filter; 
        });

        var details = '';
        for (var key in filteredJson) {
            if (filteredJson.hasOwnProperty(key)) {
              details+='<h1 class="name">' + filteredJson[key]["name"] + '</h1>';
              details+='<div class="accordion-content row">'+filteredJson[key]["gender"]'</div>';
            }
        }
        $('#accordion').html(details).fadeIn();
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log('XHR ' + jqXHR);
        console.log('status ' + textStatus);
        console.log('error ' + errorThrown);
    },
    complete: function(){
        console.log('finished all tasks');
    }
 });
}

$('.filter a').on('click', function(e) {
    e.preventDefault();
    loadMyJson($(this).attr('id'));
}

loadMyJson('all'); //This is for the initial page load

如何显示所有内容以及为什么无法按ID过滤

1 个答案: