使用jquery设置多个选项值的样式：Code仅适用于几个选项值

Question

我有一个包含样式字体的选择框

<select class="gfonts">
  <option value="arial" style="font-family:arial;">Arial</option>
  <option value="tahoma" style="font-family:tahoma;">Calibri</option>
  <option value="segoe" style="font-family:segoe;">Segoe</option>
</select>

选项设置正确，您可以在应用前预览字体。但我有700多种字体，而 选项样式（字体系列） 无效。  尝试过这个代码，但只有当字体像200那样才能使用。在上面，预览将不起作用

 var fontarray=allfonts.split(",");
 var html='';
 for(x=0;x<fontarray.length;x++)
      {
 html += '<option class="f'+x+'" style="font-family:'+fontarray[x]+';"     value="' + fontarray[x] + '">' + fontarray[x] + '</option>';
     }
 $('.font_type').append(html); 

}

请注意，所有字体都已加载，'var allfonts'是逗号分隔的字符串。

Answer 1

从用户的角度来看，将700种字体加载到列表中是没有意义的，它不像我将要浏览所有列表。您的客户可能想要修改该策略。

但是为了减轻浏览器的压力，您可以尝试在滚动列表时填充列表，而不是在加载时加载整个列表。我相信你可以使用一些像路标（http://imakewebthings.com/waypoints/）这样的模块，但你必须进一步调查。

Answer 2

试试这个

var fontarray=allfonts.split(",");
var html='';
var i = fontarray.length/100;
var j = fontarray.length/100;
for(x=0;x<fontarray.length;x++) {
   html += '<option class="f'+x+'" style="font-family:'+$.trim(fontarray[x])+';" value="' + $.trim(fontarray[x]) + '">' + $.trim(fontarray[x]) + '</option>';
   if(x == (i-(j--))*100){
       $('.font_type').append(html);
       html = "";
   }
}
$('.font_type').append(html);

Answer 3

我根据您提供的解决方案找到了解决问题的方法。我在倒计时中添加了加载字体事件，以便缓慢加载它们并允许浏览器加载它们而不会产生压力。

 var count = 0, timer = setInterval(function() {

var co = ((count++)+1);
console.log(co);

   // $('.f'+co).css('font-family',fontarray[co]);
html = '<option class="f'+co+'" style="font-family:'+fontarray[co]+';" value="' + fontarray[co] + '">' + fontarray[co] + '</option>';    
if(count == 715)
    {
 clearInterval(timer); 
    }
    $('.font_type').append(html);           

}, 20);

 }

希望这有助于将来的某些人。欢呼声