JQuery的 - 谷歌字体选择与字体大小，重量，风格

Question

我想定制我已经有了选择谷歌字体和更新预览DIV的功能之一，但是我也想添加“字体大小”，“字体重量“，”字母间距“等，但使用此功能只有当您点击主字体选择器combox框时，我希望它检查其他选项，如字体重量，大小，字母间距，然后更新预览，I尝试为每个元素个别添加Jquery代码，但他们我无法获得主选择框的值ID ..有人可以帮助我做到这一点，或至少只有一个额外的选项，我已经添加了，所以对于其余的我将自己..请看看这个小提琴，因为我几乎0当谈到jquery ..

//init when value is changed 
jQuery('.google_font_select').change(function(){ 
    var mainID = jQuery(this).attr('id'); 
    GoogleFontSelect(this, mainID); 
}); 

http://jsfiddle.net/3eWmJ/

Answer 1

在你的这几行代码看看：

var _selected = $(slctr).val(); 
... 
$('.'+ _previewer).css('font-family', _selected +', sans-serif'); 

我们基本上要做的就是复制代码，以改变文本的其他属性。这些代码行所做的是定义包含选项的HTML元素，并更改CSS属性的值。基本上，我们只需要做同样的事情，但其他属性。

使用font-weight财产为例，让我们的变量分配到的字体重量的下拉菜单：

var font_weight = $('#gfont_weight').val(); 

然后我们使用该变量来获取字体粗细，并分配它像这样：

$('.'+ _previewer).css('font-weight', font_weight);