使用javascript和下拉更改多个textareas css值？

Question

http://jsfiddle.net/g3u7hxr6/4/

我有以下代码，目前它使用下拉框更改所有 textareas css 值。

I want it so that when 1 textarea is selected and glowing green, the dropdown boxes will only change the css for the selected textarea rather than all of them.

基本上我希望能够单独更改每个文本区域的字体。

我考虑使用另一个下拉框来选择要更改的文本区域。但必须有一种方法让 javascript 检测选定的文本区域并仅对其进行更改。我需要为每个 textarea 添加一个唯一的 id 字段，但我完全迷失了 javascript。请帮忙！！！

感谢 Binvention 的回答： http://jsfiddle.net/g3u7hxr6/19/

JS：

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


$('.address').focus(
function(){
    $(this).parent('div').css('box-shadow','0px 0px 10px green');
}).blur(
function(){
    $(this).parent('div').css('box-shadow','0px 0px 0px');
});

HTML：

    <div class="options">
<div class="left">Font:
    <br>Size:
    <br>Weight:</div>
<div class="right">
    <select name="fontFamily" id="fontFamily">
        <option selected value="Verdana">Verdana</option>
        <option value="Arial">Arial</option>
    </select>
    <br>
    <select name="fontSize" id="fontSize">
        <option value="8">8</option>
        <option selected value="16">16</option>
        <option value="24">24</option>
    </select>
    <br>
    <select name="fontWeight" id="fontWeight">
        <option selected value="Bold">Bold</option>
        <option value="Normal">Normal</option>
    </select>
       <br /> <br />
</div>

        <div class="page">
<div class="left border">
    <textarea class="address" tabindex="1">text area 1</textarea>
</div>
<div class="right border">
    <textarea class="address" tabindex="4">text area 4</textarea>
</div>
<div class="left border">
    <textarea class="address" tabindex="2">text area 2</textarea>
</div>
<div class="right border">
    <textarea class="address" tabindex="5">text area 5</textarea>
</div>
<div class="left border">
    <textarea class="address" tabindex="3">text area 3</textarea>
</div>
<div class="right border">
    <textarea class="address" tabindex="6">text area 6</textarea>
</div>
</div>

CSS：

 .left {
    float: left;
}
.right {
    float: right;
}
.options {
width: 200px;
}
.page {
width: 440px;
}
.border {
border:1px solid #888;
border-radius: 5px;
padding: 5px;
margin: 0 0px 0px 0;
}

textarea {
resize:none;
height: 100px;
    width: 200px;
    overflow: auto;
    font-family: Verdana;
    font-size: 16px;
 } 

Answer 1

你需要创建一个独特的类，像这样将一个标记为选中

$('textarea').click(function(){
    $(this).toggleClass('textselected');
 });

这将允许您动态选择要编辑的文本框，只需单击即可编辑单击以取消选择编辑。您需要一些 CSS 来区分已选择和未选择。 然后，当您编辑字体和文本属性时，您使用该特殊类而不是文本区域来选择这样的属性

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

Answer 2

我已经对你的小提琴进行了必要的更改here

您需要在焦点事件中添加$(this).addClass('selected');，并在更改事件中将选择器更改为$('.address.selected')。