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

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

我希望这样，当选择1个textarea并发出绿色光时，下拉框将只更改所选textarea的css，而不是所有的css

基本上，我想能够改变每个文本区域的字体单独

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

感谢Binvention的回复：

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

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

 .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;
 } 

HTML:

$(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');
});

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

 .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;
 } 

---

您需要创建一个唯一的类，将其标记为选中，如下所示

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

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

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

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

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

---

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

---

您需要添加

$（this）.addClass（'selected'）在焦点事件中，并将选择器更改为
$（'.address.selected'）
在您的更改事件中。
尝试使用parents，而不是parents，或者去掉参数我不确定参数的用途是什么，但是parents函数只在DOM的一个级别上运行，因此添加选择器实际上不会做任何事情javascript的第二位仅用于文本区域周围的发光父分区。。。我可以想象，代码将被删除之前，我可以得到这个工作！要使其仅显示当前选定的框光泽，您可以使用：焦点指示器。您的问题是，为了更改字体类型，文本区域不再聚焦，因此无法与其他文本区域区分。您希望为选定框添加一个类，然后每次单击新文本框时，将其从旧文本框中删除文本框并将其添加到新文本框中您是指发光的绿色吗？它只显示当前选定的文本区域，可能会被删除。。。。我的主要目标是让下拉框分别对每个文本区域进行字体更改！当前的javascript一次改变了所有文本区域的字体。好吧，你可能想在文本区域迭代一下，我会更新我的答案。你能告诉我，在JSFIDLE上，我对javascript太差了，我不知道如何实现它。我想这不是我想要的。。。。例如，这就是我希望在选中textarea1时下拉框的工作方式-哦，我明白你的意思了，这有意义吗？谢谢，太接近了。。。我需要它保持选中状态并呈绿色发光，直到选中另一个框或单击空白。例如，一旦我更改字体大小，我必须再次单击文本区域以更改字体大小！此外，如果没有高亮显示，它仍然应该对所有文本区域进行更改是的，我知道这将是问题所在，如果是这种情况，您需要保持某种计数，并将其添加到选择器中以使其唯一，例如selected_1或selected_5。