使用外部javascript字典文件将HTML注入跨度

我正在使用关键字实现简单的站点过滤器。用户在搜索字段中输入关键字，并根据关键字匹配更新DOM。这已经在工作，但我不想直接将关键字编码到HTML中，我更愿意有一个外部“字典”文件，该文件根据id＃将关键字加载到HTML中。使用外部javascript字典文件将HTML注入跨度

所以我有什么是一样的东西：

<div id="23"> 
<span="keywords" style="display:none">list,of,keywords,goes,here</span> 
</div>

我想有一些jQuery的或Javascript读取外部文件是这样的：

var dictionary = { 
    "23": ["list","of","key","words"], 
    "24": ["different","list","goes","here"] 
    };

拥有在所有关键字这样的外部列表将使维护起来更容易。我很确定我需要在关键字跨度上注入innerHTML，但我不确定接下来的步骤。

编辑：我应该提及，我使用的排序过滤器要求关键字实际存在于HTML中。我基本上需要像上面那样写出html。我只想将单词/ id列表放在单独的，易于编辑的文件中。

来源

2017-04-24 dijon

为什么不直接在字典中使用HTTP获取JSON文件？在JQuery中，您正在寻找$ .ajax函数。在香草JS中，您正在寻找XMLHttpRequest API。 –

为什么不使用单独的JS文件并将其包含在脚本标记中？ – zfrisch

Thanks @zfrisch - 这就是我在想的路线，我只是不确定我会如何实现这一点。我是否会调用写入所有跨度的函数onload？我已经使用了一个排序库，它需要我的关键字实际上在HTML中才能正常工作。 – dijon

-1

我有一个答案，它的工作原理和所做的一切，我希望它做 - 但是这导致了另一个问题：这是一个很好的方式去做这件事吗？

在我的HTML我把：（1为每个一百元左右的div）

<span class="keys" id="keywords_101" style="display:none"></span>

这是什么将成为我的逗号分隔的关键字列表，我需要为我的过滤器插件：

JS：

var fruitlist = { 
    "103": ["apples","bananas","pears"], 
    "102": ["dates","kiwis","mangos"], 
    "101": ["passion fruit","watermelon","grapes"], 
    "100": ["oranges","tangerines","lychee"] 
} 

$(document).ready(function(){ 
Object.size = function(obj) { 
var size = 0, key; 
for (key in obj) { 
    if (obj.hasOwnProperty(key)) size++; 
} 
return size; 
}; 

var size = Object.size(fruitlist); 

for (var n=0; n < size; n++) { 
    var track_key = Object.keys(fruitlist)[n]; 
    var keyword = fruitlist[track_key]; 
    for (var i=0; i < fruitlist[track_key].length;i++) { 
    document.getElementById('keywords_'+track_key).innerHTML=keyword; 
    } 
    } 
});

所以这一切现在都有效。但是，有没有更简单/更好/更有效的方法来做到这一点，而不是循环通过100 +项目的水果列表和写入div？

我可以诚实地将div编码到HTML中，但我更喜欢编辑关键字列表，让他们以易于访问/编辑格式从HTML中分离出来是很有吸引力的。

谢谢

来源

2017-04-25 18:57:48 dijon

我看到我收到了我的回答的投票，除非有解释，否则这当然没有帮助。我将它标记为答案，因为它是有效的 - 除非有人能够拿出理由来说明它应该以不同的方式完成。 – dijon

使用外部javascript字典文件将HTML注入跨度

回答

相关问题