0

ドロップダウンリスト/メニューがあり、各オプションに値があります。その値を要素に渡して、目的のスタイルを決定したいと思います。これが私の生のhtmlです。jqueryがこれを実行できることを期待しています。渡す必要のある要素も呼び出されます

 <div class="user-text">

したがって、値ごとにこのようなクラスを追加できることを期待しています。

 <div class="user-text curveMeTop">

これが値のリストです

 <div class="top15">
  <div class="label">Text Warp</div>
  <select name="warp-list">
    <option value="curveMeTop">Curve Top</option>
    <option value="curveMeBottom">Curve Bottom</option>
    <option value="wave">Wave</option>
    <option value="buldge">Buldge</option>
    <option value="skew">Skew</option>
  </select>
  </div>
4

2 に答える 2

1

どうぞ：

$(function(){
    $('#warp-list').on('change', function() {
        $('div.user-text').attr('class', 'user-text ' + $(this).find('option:selected').val());
    });
});

たとえば、 JSFiddleを参照してください。

addClassではなくviaを使用してクラスを設定する理由attrは、そうしないと、ドロップダウン選択を変更するたびにクラスを追加し続けるためです。別の方法は、最初にすべてのクラスオプションを削除するか、クラスをゼロにリセットしてから、「user-text」クラスと追加するクラスを追加することです。

于 2012-05-25T03:05:40.037 に答える
0

メソッドを使用できますaddClass::

$('select').change(function(){
  var cls = $(this).val();
  $('.user-text').addClass(cls);
})
于 2012-05-25T03:06:03.283 に答える