1

ドロップダウンの値に応じて、特定の div にクラスを追加する 3 つのドロップダウンがあります。

<select name="item1">
    <option>Blue</option>
    <option>Green</option>
    <option>Red</option>
</select>

<select name="item2">
    <option>Blue</option>
    <option>Green</option>
    <option>Red</option>
</select>

<select name="item3">
    <option>Blue</option>
    <option>Green</option>
    <option>Red</option>
</select>

<div class="product">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
</div>

ドロップダウンの値に応じて css クラスを追加しようとしています。たとえば、ドロップダウン item1 からオプション blue が選択されている場合、クラス.blueをdiv item1に追加したいと思います。

ドロップダウンの代わりにチェックボックスを使用していましたが、次のコードがありました。

$(document).ready(function($){
    $('input#red').change(function(){
        if($(this).is(":checked")) {
            $('div.item1').addClass("red");
        } else {
            $('div.item1').removeClass("red");
        }
    });
    $('input#blue').change(function(){
        if($(this).is(":checked")) {
            $('div.item1').addClass("blue");
        } else {
            $('div.item1').removeClass("blue");
        }
    });
});

私はこれを作成しました: http://jsfiddle.net/uJcB7/14/ どのように正しく行うべきですか?

- - - - - - 編集 - - - - - -

重力フォームを使用して選択ボックスを生成していますが、オプションの名前の後に "|0" が追加されています (理由はわかりません!)。

たとえば、「green」ではなく「green|0」です。"|0" はフィールドに隠されていますが、生成されたクラスは "green|0" です。

css クラスでその "|0" を削除する方法について何か考えはありますか?

また、選択ボックスの名前を生成しますが、名前要素を使用する代わりにクラスを使用することは可能ですか?

更新されたコードを見てください。

http://jsfiddle.net/uJcB7/24/

4

6 に答える 6

2

クラスを追加するクラスは、変更される要素のプロパティ<div>と同じであり、追加するクラスの名前は、選択したオプションの値の小文字バージョンです。それを念頭に置いて、これは機能します：name<select>

$(document).ready(function($){
    $('select').change(function(){
        $('.' + this.name).attr('class', this.name + ' ' + this.value.toLowerCase());
    });
});

jsFiddle デモ

于 2012-06-26T13:17:43.307 に答える
1

選択したオプションのテキスト値を適切な div に追加する一般的な関数を次に示します。

$(document).ready(function($){

  $('select').change(function(){
    var s = $(this);
    var name = s.attr('name');
     $('.'+name).removeClass().addClass(name+' '+s.find(':selected').text().toLowerCase());
  });
});​

デモ: http://jsfiddle.net/jackwanders/xcEa9/4/

さらに一般的には、 $.map を使用して選択メニューの値のリストを取得し、変更イベントごとに削除するクラス名を知ることができます。

$('select').change(function(){
    var $this = $(this);
    var values = $.map($this.find('option'),function(opt){ return opt.value.toLowerCase(); }).join(' ');
    $('.'+this.name).removeClass(values).addClass($(this).val().toLowerCase());
});

デモ: http://jsfiddle.net/jackwanders/xcEa9/5/

于 2012-06-26T13:17:38.677 に答える
0

これにより、クラスで以前に設定された色の値 (存在する場合) がクリアされ、新しい値が設定されます。

$(document).ready(function($){
    $('select').change(function(){
        name = $(this).attr('name');
        curClass = $('div.'+name).attr('class');
        $('div.'+name).removeClass(curClass).addClass(name + ' ' +$(this).val());
    });
});

ここでフィドル

于 2012-06-26T14:03:33.350 に答える
0 
$(document).ready(function() {

  $('#item1').change(function() {
    $('.item1').addClass($('#item1').val());
  });

  $('#item2').change(function() {
    $('.item2').addClass($('#item2').val());
  });

  $('#item3').change(function() {
    $('.item3').addClass($('#item3').val());
  });

});

必要に応じて、個々のセグメントを for ループ内に保持することもできます。

于 2012-06-26T13:17:57.393 に答える
0

これはすべてのselect要素で機能します。

jsFiddle デモ

$('select[name^=item]').change(function(){
    var val = $(this).val();
    $('div.'+$(this).attr('name')).removeClass('red blue green').addClass(val);
});

select[name^=item]名前がで始まる選択要素を検索しますitem

于 2012-06-26T13:20:31.190 に答える
0 
$(function() {
  $('select').bind('change', function() {
    var $this = $(this);
    $this.find('option:not(:selected)').each(function(index, option) {
      $this.removeClass($(option).text());
    });
    $this.addClass($this.find('option:selected').text());
  });        
});

更新された JSFiddle

于 2012-06-26T13:38:03.030 に答える