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

我有一个选择框，用于保存样式的字体

<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多种字体， 选项样式（font-family）不起作用。 我试过这个代码，但它只能在字体像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'是逗号分隔的字符串。

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

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

试试这个

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);

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

 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);

 }

希望这有助于将来的某些人。 干杯

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

问题描述

1楼

2楼

3楼