元々がclassで色付けする仕様であればcss()メソッドで色を変えるより
クラスを付け替えるほうがよいのでは?
CSS
1.red{ background-Color: red;}
2.blue{ background-Color: blue;}
3.green{ background-Color:green;}
4.change {
5 color: #fff;
6 font-weight: bold;
7 width: 100px;
8 margin: 20px;
9}
javascript
1$(function(){
2 $('select').on('change',function(){
3 $('.change').removeClass('red blue green').addClass($(this).val());
4 });
5});
HTML
1<select class="select_color" name="onamae" data-required="no" data-type="select">
2<option value="blue">ブルー</option>
3<option value="red">レッド</option>
4<option value="green">グリーン</option>
5</select>
6<div class="change blue">色よ変われ!</div>
追記
.kokomo:beforeの色を変える
css
1.red{ background-Color: red;}
2.blue{ background-Color: blue;}
3.green{ background-Color:green;}
4.beforered:before{background-Color: red;}
5.beforeblue:before{ background-Color: blue;}
6.beforegreen:before{ background-Color:green;}
7
8.box {margin: 20px;}
9.change {
10 color: #fff;
11 font-weight: bold;
12 width: 200px;
13 margin: 20px;
14}
15.kokomo {
16 color: #000000;
17 margin: 20px;
18 font-weight: bold;
19}
20.kokomo:before {
21content: '';
22 position: absolute;
23 top: 0;
24 width: 20px;
25 height: 20px;
26 border-radius: 50%;
27}
javascript
1$(function(){
2 $('select').on('change',function(){
3 $('.change').removeClass('red blue green').addClass($(this).val());
4 $('.kokomo').removeClass('beforered beforeblue beforegreen').addClass("before"+$(this).val());
5 });
6});
HTML
1<div class="box">
2<select class="select_color" name="onamae" data-required="no" data-type="select">
3<option value="blue">ブルー</option>
4<option value="red">レッド</option>
5<option value="green">グリーン</option>
6</select>
7</div>
8
9<div class="change blue">ここの色が変わる!</div>
10<div class="kokomo beforeblue">ここも</div>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/02/02 07:13
2018/02/02 07:29
退会済みユーザー
2018/02/02 07:53