1

我正在尝试遍历我的数据，但它返回undefined第一个循环！，我尝试了几种方法，但仍然无法正常工作！

$.ajax({
    type:'GET',
    url:'/categories',
    success:function(data){
        var cates = data.data;  
        console.log(cates)   
        var my_div;  
        $.each(cates,function(key,value){   
            console.log(value)
            var beds = value['beds']
            console.log(beds)
            var f_type = value['f_type']
            var room_type = value['room_type']
            var total = value['total']
            var balcon = value['balcon']
            if(balcon==true){
                balcon='True'
            }else{
                balcon='False'
            }
            
            var link = '/rooms/'+f_type+'/'+room_type+'/'+beds+'/'+balcon;
            my_div+='<a href="'+link+'" class="transition transform cursor-pointer duration-400 hover:scale-105 hover:shadow-xl">';
            my_div+='<div class="h-32 overflow-hidden rounded-tl-2xl rounded-tr-2xl room"></div>';
            my_div+='<div class="items-center p-2 rounded-bl-xl rounded-br-xl bglightpurple">';
            my_div+='<div  class="text-center rounded-lg" style="background: #534e70;">';
            my_div+='<p class="inline textorange "><i class="bi bi-columns-gap"></i></p>'
            my_div+='<p class="inline text-white">'+room_type+' - '+f_type+' - '+beds+ ' beds</p>';
            my_div+='</div>';

            my_div+='</div>';
            my_div+='</a> ';
               
        })
        document.getElementById('my_cates').innerHTML = my_div;
        


    },
    error: function(){

    }

})
<div class="p-4 mt-3">

    <div class="grid grid-cols-1 gap-6 pt-3 pt-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 " id="my_cates">
        
    </div>
</div>

我也尝试使用for(i=0;i<cates.length;i++)，但它仍然返回相同的东西，第一个循环未定义？！我做错了什么吗？提前致谢

4

1 回答 1

0

只需将其放入一个函数中，并在其工作时定义my_div整个==""代码

function cates(){
    var my_div = "";
    $.ajax({
        type:'GET',
        url:'/categories',
        success:function(data){
            var cates = data.data;  
            for(i=0;i<cates.length;i++){    
    
                var beds = cates[i]['beds']
                var f_type = cates[i]['f_type']
                var room_type = cates[i]['room_type']
                var total = cates[i]['total']
                var balcon = cates[i]['balcon']
                if(balcon==true){
                    balcon='True'
                }else{
                    balcon='False'
                }
                
                var link = '/rooms/'+f_type+'/'+room_type+'/'+beds+'/'+balcon;
                my_div+='<a href="'+link+'" class="transition transform cursor-pointer duration-400 hover:scale-105 hover:shadow-xl">';
                my_div+='<div class="h-32 overflow-hidden rounded-tl-2xl rounded-tr-2xl room"></div>';
                my_div+='<div class="items-center p-2 rounded-bl-xl rounded-br-xl bglightpurple">';
                my_div+='<div  class="text-center rounded-lg" style="background: #534e70;">';
                my_div+='<p class="inline textorange "><i class="bi bi-columns-gap"></i></p>'
                my_div+='<p class="inline text-white">'+room_type+' - '+f_type+' - '+beds+ '</p>';
                my_div+='</div>';

                my_div+='</div>';
                my_div+='</a> ';
                    
            }
            document.getElementById('my_cates').innerHTML = my_div;
            
    
    
        },
        error: function(){
    
        }
    
    })
    
}
cates();

于 2021-09-12T18:53:56.140 回答