动态加载JSON的点击和填充列表元素

我有几个JSON文件，我想使用JavaScript点击事件并填充无序列表中的动态加载它们。我怎样才能做到这一点？我的解决方案不起作用。我应该使用像AngularJS这样的javascript框架吗？动态加载JSON的点击和填充列表元素

这里是我的代码：

<!-- start home --> 
<span data-deck="home" class="load-map home-marker marker current-level node" data-toggle="modal" data-target="#myModal"> 
    <i class="fa fa-home"></i> 
</span><!-- end home --> 

<!-- start housing --> 
<span data-deck="housing" class="load-map housing-marker marker current-level node" data-toggle="modal" data-target="#myModal"> 
    <i class="fa fa-building-o"></i> 
</span><!-- end housing --> 

<!-- start school --> 
<span data-deck="school" class="load-map school-marker marker node" data-toggle="modal" data-target="#myModal"> 
    <i class="fa fa-graduation-cap"></i> 
</span><!-- end school -->

JSON实例

[ 
    { 
    "Card #": 0, 
    "Type": "Opportunity", 
    "Tier": 1 
    }, 
    { 
    "Card #": 5, 
    "Type": "Opportunity", 
    "Tier": 2 
    } 
]

来源

2017-03-18 babusi

什么是不工作？ –

为什么'async：false'？为什么'jsonp'？为什么要清空'beforeSend'函数？ “我的解决方案无法正常工作”是什么意思？不，你不需要框架（Angular或其他）这个 –

@DarrenSweeney我编辑了代码来删除不必要的东西。我希望有所帮助 – babusi

它是不容易从你的代码来了解，但我知道你已经包裹了ajax在另一个jQuery对象内部，这可能是不必要的。

$('.load-map').click(function() { 
    var deck = $(this).attr('data-deck'); 
    $('.load-map').removeClass('current-level'); 
    $(this).addClass('current-level'); 
    alert(deck) 

    $.ajax({ 
     // rest of the code 
    }); 

});

也有这个点击处理程序内的空setTimeout，

来源

2017-03-18 10:06:39 brk

动态加载JSON的点击和填充列表元素

回答

相关问题