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

I have this following code, currently it changes all textareas css values with the dropdown boxes.

我有以下代码,目前它使用下拉框更改所有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.

我想要它,这样当选择1 textarea并发绿光时,下拉框只会更改所选textarea的css而不是所有texta。

Basically I want to be able to change each text area font individually.

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

I considered using another dropdown box to select which textarea to change. but there must be a way for the javascript to detect the selected textarea and make changes to it only. I would need to add a unique id field to each textarea but i'm completely lost with the javascript. please help!!!

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

Answered thanks to Binvention: http://jsfiddle.net/g3u7hxr6/19/

感谢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;
 }

2 个解决方案

#1

You need to create a unique class that marks one as selected like this

您需要创建一个唯一的类,将其标记为像这样选择

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

That will allow you to dynamically pick which text boxes your editing just click to edit click to deselect from editing. You'll need some css to distinguish selected from not selected though. Then when you edit the font and text properties you use that special class not the text areas to select the property like this

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

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

#2

I have edited your fiddle with the necessary changes here

我已经在这里编辑了你的小提琴

You need to add $(this).addClass('selected'); within your focus event and change the selector to $('.address.selected') within your change event.

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

#1