Question

我正在使用关键字实现一个简单的网站过滤器。用户在搜索字段中键入关键字，并根据关键字匹配更新DOM。这已经有效但我不希望将关键字直接编码到HTML中，我更喜欢使用外部词典＆＃39;根据id＃。

将关键字加载到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"]
   };

将所有关键字都放在这样的外部列表中会使维护更容易。我非常确定我需要在关键字span上注入innerHTML，但我不确定接下来的步骤。

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

Answer 1

我得到了一个答案，它可以运作并完成我想要它做的所有事情 - 但这又引出了另一个问题：这是一个很好的方法吗？

在我的HTML中，我把:(每100个div中有1个）

   <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中删除是有吸引力的。

谢谢

使用外部JavaScript字典文件将HTML注入span

1 个答案: