javascript - Jquery - 带有字体大小、粗细、样式的 Google 字体选择

Question

我正在尝试自定义我已经拥有的用于选择 Google 字体和更新预览 DIV 的功能之一，但是我还想添加“字体大小”、“字体粗细”、“字母间距”等，但是此功能仅在您单击“主字体选择器”组合框时才有效，我希望它检查其他选项，如字体粗细、大小、字母间距，然后更新预览，我尝试为每个元素单独添加 Jquery 代码，但我不能获取主选择框的值 ID。有人可以帮我做这个吗，或者至少只处理我添加的一个额外选项，以便剩下的我自己做。请看看这个 fiddle 因为我在 jquery 方面几乎是 0..

//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 元素并更改 font-family CSS 属性的值。基本上，我们只需要为其他属性做同样的事情。

使用 font-weight以属性为例，让我们为 font-weight 的下拉菜单分配一个变量:

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

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

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