Question

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

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

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

我考虑使用另一个下拉框来选择要更改的textarea。但必须有一种方法让javascript检测选定的textarea并仅对其进行更改。我需要为每个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')。

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

2 个答案: