Question

我正在练习Jquery和Json，并且已经编写了一个工作代码来根据事件类型过滤json数据，这些事件在Json中存储为“标签”。这是我输入的代码，但是我认为这不是最佳实践，因为它很长，而且我知道这是不对的，我想问一下如何缩短这个很长的jquery代码。

    $("#search").change(function(){

    $("html, body").animate({ scrollTop: $(".calendar").offset().top }, 1500);  

    var selectedEvent = $("#search").val();

    var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET','events.json');
    ourRequest.onload = function(){
    var ourData = JSON.parse(ourRequest.responseText); 

    if (selectedEvent == "all") {
    renderEvents(ourData); 
    } if (selectedEvent == "whiskey") {

    searchWhiskey(ourData); 
    } if (selectedEvent == "cider") {
        searchCider(ourData); 
    }  if (selectedEvent == "cider") {
    searchSpirits(ourData); 
    } 
    };
    ourRequest.send();
    });

    function renderEvents(calEvent){

    $(".order-details-table").empty(); 
     for (var i = 0; i < calEvent.length; i++) {
     for (var ii = 0; ii <calEvent[i].products.length; ii++) {

    $(".order-details-table").append('<tr><td class="o-box-name"><a name="detailsevent">'+ calEvent[i].products[ii].name +'</a></td><td class="o-box-name">'+calEvent[i].title+'<br><small>'+calEvent[i].products[ii].time+'</small><small>&nbsp'+calEvent[i].products[ii].location+'</small></td><td><a href="'+ calEvent[i].products[ii].url +'" class="cancel-del-text" target=_"blank">Register!</a></td></tr>');
    }
   }
  }  

    function searchWhiskey(calEvent){
    $(".order-details-table").empty(); 
    for (var i = 0; i < calEvent.length; i++) {
     if(calEvent[i].tags == 'whiskey'){
      for (var ii = 0; ii <calEvent[i].products.length; ii++) {
       $(".order-details-table").append('<tr><td class="o-box-name"><a name="detailsevent">'+ calEvent[i].products[ii].name +'</a></td><td class="o-box-name">'+calEvent[i].title+'<br><small>'+calEvent[i].products[ii].time+'</small><small>&nbsp'+calEvent[i].products[ii].location+'</small></td><td><a href="'+ calEvent[i].products[ii].url +'" class="cancel-del-text" target=_"blank">Register!</a></td></tr>');
      }
    }
   }  
  }
   function searchCider(calEvent){
     $(".order-details-table").empty(); 
     for (var i = 0; i < calEvent.length; i++) {
      if(calEvent[i].tags == 'cider'){
       for (var ii = 0; ii <calEvent[i].products.length; ii++) {
       $(".order-details-table").append('<tr><td class="o-box-name"><a name="detailsevent">'+ calEvent[i].products[ii].name +'</a></td><td class="o-box-name">'+calEvent[i].title+'<br><small>'+calEvent[i].products[ii].time+'</small><small>&nbsp'+calEvent[i].products[ii].location+'</small></td><td><a href="'+ calEvent[i].products[ii].url +'" class="cancel-del-text" target=_"blank">Register!</a></td></tr>');
          }
      }
     }  
    }
    function searchTequila(calEvent){
     $(".order-details-table").empty(); 
     for (var i = 0; i < calEvent.length; i++) {
      if(calEvent[i].tags == 'tequila'){
       for (var ii = 0; ii <calEvent[i].products.length; ii++) {
         $(".order-details-table").append('<tr><td class="o-box-name"><a name="detailsevent">'+ calEvent[i].products[ii].name +'</a></td><td class="o-box-name">'+calEvent[i].title+'<br><small>'+calEvent[i].products[ii].time+'</small><small>&nbsp'+calEvent[i].products[ii].location+'</small></td><td><a href="'+ calEvent[i].products[ii].url +'" class="cancel-del-text" target=_"blank">Register!</a></td></tr>');
        }
       }
      }  
    }
    function searchWine(calEvent){
     $(".order-details-table").empty(); 
     for (var i = 0; i < calEvent.length; i++) {
     if(calEvent[i].tags == 'wine'){
       for (var ii = 0; ii <calEvent[i].products.length; ii++) {
        $(".order-details-table").append('<tr><td class="o-box-name"><a name="detailsevent">'+ calEvent[i].products[ii].name +'</a></td><td class="o-box-name">'+calEvent[i].title+'<br><small>'+calEvent[i].products[ii].time+'</small><small>&nbsp'+calEvent[i].products[ii].location+'</small></td><td><a href="'+ calEvent[i].products[ii].url +'" class="cancel-del-text" target=_"blank">Register!</a></td></tr>');
       }
      }
     }  
    }

    function searchSpirits(calEvent){
    $(".order-details-table").empty(); 
     for (var i = 0; i < calEvent.length; i++) {
     if(calEvent[i].tags == 'cider'){
       for (var ii = 0; ii <calEvent[i].products.length; ii++) {
         $(".order-details-table").append('<tr><td class="o-box-name"><a name="detailsevent">'+ calEvent[i].products[ii].name +'</a></td><td class="o-box-name">'+calEvent[i].title+'<br><small>'+calEvent[i].products[ii].time+'</small><small>&nbsp'+calEvent[i].products[ii].location+'</small></td><td><a href="'+ calEvent[i].products[ii].url +'" class="cancel-del-text" target=_"blank">Register!</a></td></tr>'); 
      }
     }
    }  
    }

Answer 1

如果使用的是jQuery，则可以使用jQuery的ajax方法或getJSOn方法来请求和获取json，如下所示：

 $.getJSON('events.json', function (data) {
        var ourData = JSON.parse(data);
       // You code here
  });

如果您选择的事件和标签名称相同，则可以通过以下方式大大简化代码：

$("#search").change(function () {
        $("html, body").animate({ scrollTop: $(".calendar").offset().top }, 1500);
        var selectedEvent = $("#search").val();
        $.getJSON('events.json', function (data) {
            var ourData = JSON.parse(data);
            render(selectedEvent, ourData);
        });
    });

    function render(selectedEvent, data) {
        $(".order-details-table").empty();
        $(data).each(function (i, v) {                
            if (selectedEvent == 'all' || v.tags == selectedEvent) {
                if (v.products)
                    $(v.products).each(function (index, p) {
                        $(".order-details-table").append('<tr><td class="o-box-name"><a name="detailsevent">' + p.name + '</a></td><td class="o-box-name">' + v.title + '<br><small>' + p.time + '</small><small>&nbsp' + p.location + '</small></td><td><a href="' + p.url + '" class="cancel-del-text" target=_"blank">Register!</a></td></tr>');
                    });
            }                
        });
    }

根据最佳实践缩短此Jquery代码

1 个答案: