2

私はいくつかのコードに取り組んでいます、基本的に私はフォームを持っています。そのフォームには、ユーザーにフォントの色を選択してもらいたい選択オプションがあります。次に、cssクラスとして選択したオプションを追加して、そのオプションをページ上の要素に追加する必要があります。これをライブで行う必要があります。

したがって、次のような要素を形成します。

<select id="selectcolor" name="selectcolor" style="width: 200px;">
                        <option value="null">-- Select a Color ... --</option>
                        <option value="black">Black</option>
                        <option value="white">White</option>
                </select>

私が作ったJSは：

//select text color
    $("#selectcolor").change(function(){
    var color = $(this).val();
    $(".selectcolor").css("color", 'color');

変更を適用するHTML：

<div class="rightBottom selectcolor">Change this text<br />color</div>

それからcssで私はするつもりでした：

.black {color:#000;}
.white {color:#fff;}

等

基本的に、ユーザーが選択オプションを変更すると、たとえば黒にすると、クラス属性はdiv/span要素のテキストの色を黒に変更します。等

任意の提案をお願いします、私は選択オプション値color：＃000などを追加しようとしましたが、うまくいきませんでした、私が見落としているいくつかの問題があると思います...

前もって感謝します

4

4 に答える 4

2 
$('#selectcolor').change(function() {
    var color = this.value || '';
    $('.selectcolor').attr('class', function(i, classes) {
        var cls = classes.split(/[\s]/);
        cls[2] = color;
        return cls.join(' ');
    });
});

デモ

于 2012-06-20T01:25:17.067 に答える
1

可変色を使用する代わりに定数「色」を使用しているためだと思います。行を変更します：

 $(".selectcolor").css("color", 'color');

に：

$(".selectcolor").css("color", color)
于 2012-06-20T01:23:00.043 に答える
0

私はあなたが変える必要があると思います

$(".selectcolor").css("color", 'color');

に

$(".selectcolor").css("color", color);

于 2012-06-20T01:25:18.207 に答える
0

私が正しく理解したように、選択したオプション値に基づいて要素に適切なクラス名を取得する必要があります。

だから、ここに頭に浮かぶ解決策があります：

<select id="selectcolor" name="selectcolor" style="width: 200px;">
     <option value="null">-- Select a Color ... --</option>
     <option value="000000">Black</option>
     <option value="ffffff">White</option>
</select>

$("#selectcolor").change(function(){
    var color = $(this).val();
    $(".selectcolor").css('color', '#'+ color);
}

お役に立てば幸いです。私はコードをテストしませんでしたが、その背後にある考え方は、オプション値を＃記号なしのカラーコードとして作成することです。そのため、クエリの3行目で＃が文字列に貼り付けられます。jQueryで変数を使用するときは、変数を静的テキストとして解釈するため、\'で囲まないように注意してください。

于 2013-02-22T14:14:36.147 に答える