Question

我正在使用chained selectbox通过Ajax填充选项，并使用localStorage保存返回的数据。代码正在运行，但我想简化代码。

我想知道是否可以将两个$.each函数定义为ajax代码之外的函数，并在成功函数中调用它，如 this example ，但棘手的部分是返回的数据在ajax成功函数中定义为data，而它从localStorage定义为key。

代码失败：

function loop(){
$.each(data.query.results.json.json, function (index, i) {         
      smallchoice = i.choice.split('|');
        $.each(smallchoice,function(j,smallchoice){
           $option = $("<option/>").attr("value", smallchoice).text(i.bigcat + "@" +( i.cat || "") +"@" +  smallchoice);
           $select.append($option); 
         });          
});                    
$select.dynamicDropdown({"delimiter":"@"});
}


$('select').each(function(loop){
    $(this).one("mouseenter",function(){
     var name = $(this).data('name'),
         key = JSON.parse(localStorage.getItem(name)),
         $select = $('select');var $option="";

     $(this).addClass('yellow');

     if (!key) {
       $.ajax({
        url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%20%3D%22http%3A%2F%2Fcheapgamessales.com%2F133.json%22&format=json&diagnostics=true&callback=", 
        success: function(data){
          localStorage.setItem(name, JSON.stringify(data));
          loop(data);
        } 
      });
     }
     else{         
         loop(key);            
     }

});
});

原始工作代码：

$('select').each(function(){
    $(this).one("mouseenter",function(){
     var name = $(this).data('name');
     var key = JSON.parse(localStorage.getItem(name));
     var $select = $('select');var $option="";
     $(this).addClass('yellow')  
     if (!key) {
       $.ajax({
        url: url, 
        success: function(data){
          localStorage.setItem(name, JSON.stringify(data));

          $.each(data.query.results.json.json, function (index, i) {         
            smallchoice = i.choice.split('|');
              $.each(smallchoice,function(j,smallchoice){
                 $option = $("<option/>").attr("value", smallchoice).text(i.bigcat + "@" +( i.cat || "") +"@" +  smallchoice);
                 $select.append($option); 
              });          
          });                    
         $select.dynamicDropdown({"delimiter":"@"});
        } 
      });
     }
     else{
           $.each(key.query.results.json.json, function (index, i) {         
             smallchoice = i.choice.split('|');
           $.each(smallchoice,function(j,smallchoice){
             $option = $("<option/>").attr("value", smallchoice).text(i.bigcat + "@" +( i.cat || "") +"@" +  smallchoice);
             $select.append($option); 
       });
    });
           $select.dynamicDropdown({"delimiter":"@"});         


    }

  }); // end one function
});

Answer 1

喜欢这个吗？

function loop(data, $select){
    $.each(data.query.results.json.json, function (index, i) {         
            smallchoice = i.choice.split('|');
              $.each(smallchoice,function(j,smallchoice){
                 $option = $("<option/>").attr("value", smallchoice).text(i.bigcat + "@" +( i.cat || "") +"@" +  smallchoice);
                 $select.append($option); 
              });  
    });

}

$('select').each(function(){
    $(this).one("mouseenter",function(){
     var name = $(this).data('name');
     var key = JSON.parse(localStorage.getItem(name));
     var $select = $('select');var $option="";
     if (!key) {
       $.ajax({
        url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%20%3D%22http%3A%2F%2Fcheapgamessales.com%2F133.json%22&format=json&diagnostics=true&callback=", 
        success: function(data){
          localStorage.setItem(name, JSON.stringify(data));

          loop(data, $select);                   
         $select.dynamicDropdown({"delimiter":"@"});
        } 
      });
     }
     else{
         loop(key, $select);
         $select.dynamicDropdown({"delimiter":"@"});            
    }   
});
});

在`.ajax`之外定义一个json解析函数

1 个答案: