使用javascript更改字体系列字体大小和字体重量不起作用？

我试图让下面的javascript根据下拉框中选择的内容更改文本区域的内容。

Javascript：

$(function () {
    $("#fontsize").on('change', function () {
    $('.address').css('font-size', $(this).val() + 'px');
    });
});

$(function () {
    $("#fonttype").on('change', function () {
    $('.address').css('font-family', $(this).val());
    });
});

$(function () {
    $("#fontweight").on('change', function () {
    $('.address').css('font-weight', $(this).val());
    });
});

HTML：

Font Size:
<select id="fontsize">
<option>-</option>
<option value="24">24</option>
<option value="16">16</option>
</select>

<br />Font Type:
<select name="fonttype">
<option>-</option>
<option value="verdana">Verdana</option>
<option value="arial">Arial</option>
</select>

<br />Font Weight:
<select id="fontweight">
<option>-</option>
<option value="bold">Bold</option>
<option value="regular">Regular</option>
</select>

<div>
<textarea id="label" class='address'>Hello 123</textarea>
<textarea class='address'>Hello 123</textarea>
</div>

字体大小：
-
24
16

字体类型：
-
威尔达纳
Arial

字体大小：
-
大胆的
有规律的
你好123
你好123

只需检查编码即可

因为在字体类型选择器上设置了

name

而不是

id

，所以该族不起作用

---

而

常规

应该是

正常

对于

字体重量

只需检查编码即可

因为在字体类型选择器上设置了

name

而不是

id

，所以该族不起作用

---

而

regular

应该是

normal

，因为

font-weight

可以通过调整

html

，

js

缩短为单功能；将元素的

id

设置为属性，以设置为

css

；在

fontFamily

元素处用

normal

代替

regular

；使用

RegExp.prototype.test（）

检查元素值中的数字，以返回长度值，包括

“px”

或

字符串，在设置
css
值时选择
值

html

通过调整
html
，
js
，jsiddle
可以缩短为单个功能；将元素的
id
设置为属性，以设置为
css
；在
fontFamily
元素处用
normal
代替
regular
；使用
RegExp.prototype.test（）
检查元素值中的数字，以返回长度值，包括
“px”
或
字符串，在设置
css
值时选择
值

html

JSFIDLE
我认为这是最干净的版本：


$（函数（）{
$（“选择”）。在（'change'，function（）上{
var$property=$（this.attr（'name'）；
var$value=$（this.data（“sufix”）？$（this.val（）+$（this.data（“sufix”）：$（this.val（）；
$（'.address'）.css（$property，$value）；
});
});
字体大小：
-
24
16

字体类型：
-
威尔达纳
Arial

字体大小：
-
大胆的
正常的
你好123
你好123
我认为这是最干净的版本：


$（函数（）{
$（“选择”）。在（'change'，function（）上{
var$property=$（this.attr（'name'）；
var$value=$（this.data（“sufix”）？$（this.val（）+$（this.data（“sufix”）：$（this.val（）；
$（'.address'）.css（$property，$value）；
});
});
字体大小：
-
24
16

字体类型：
-
威尔达纳
Arial

字体大小：
-
大胆的
正常的
你好123
你好123
不应删除name属性，稍后回发时可能需要它。最好将id与name@guest271314在单个函数中，只有字体大小应具有“px”后缀。如果不删除name属性，则稍后回发时可能需要该属性。最好将id与name@guest271314在单个函数中，只有字体大小应具有“px”后缀。
Font Size:
<select name="fontSize" id="fontSize">
    <option>-</option>
    <option value="24">24</option>
    <option value="16">16</option>
</select>
<br />Font Type:
<select name="fontFamily" id="fontFamily">
    <option>-</option>
    <option value="verdana">Verdana</option>
    <option value="arial">Arial</option>
</select>
<br />Font Weight:
<select name="fontWeight" id="fontWeight">
    <option>-</option>
    <option value="bold">Bold</option>
    <option value="normal">Normal</option>
</select>
<div>
<textarea id="label" class='address'>Hello 123</textarea>
<textarea class='address'>Hello 123</textarea>
</div>

$(function () {
    $("[id^=font]").on("change", function () {
       $(".address")
       .css(this.id, /\d/.test(this.value) ? this.value + "px" : this.value);
    });
});