1

ドロップダウンの値を使用して、divにクラスを追加しようとしています。私はそれをなんとかすることができました、しかし、前のクラスはまだdivにあり、置き換えられていません

だから得る代わりに

<div id="layoutblock" class="row one-column">

私は得ています

<div id="layoutblock" class="row one-column two-columns three-columns">

クラスは複利です

HTML

<select id="layout">
<option value="one-column">one-column</option>
<option value="two-columns">two-column</option>
<option value="three-columns">three-column</option>
</select>

<div id="layoutblock" class="row"></div>

JQuery

<script type="text/javascript">

$("#layout").change(function () {
  var str = "";
$("#layout option:selected").each(function () {
  str += $(this).val();   
  });
$('#layoutblock').removeClass($(this) str);
$('#layoutblock').toggleClass(str);
})
.change();

</script>

任意のアイデア、ありがとう

よろしく言った

4

5 に答える 5

1

jsFiddleデモ

$(function () {
    $("#layout").change(function () {
        $('#layoutblock')[0].className = "row " + $(this).val();
    });
});
于 2013-03-15T14:16:48.567 に答える
1

このコードを試してください、

var oldVal = "";
$(function() {
    $("#layout").change(function () {
        if(oldVal) {
            $('#layoutblock').removeClass(oldVal);
        }
        $('#layoutblock').addClass($(this).val());
        oldVal = $(this).val(); //Update the old value   
    }).change(); 
 })

デモ： http： //jsfiddle.net/hwznY/

于 2013-03-15T14:20:41.337 に答える
1

これを試して：

$("#layout").change(function () {
    $('#layoutblock')
        .removeClass()
        .addClass("row")
        .addClass($(this).val());
})
.change();
于 2013-03-15T14:22:11.187 に答える
0

これを試して

$("select option:not(:selected)").each(function () {    
var value  = $(this).val();
$("#layout").removeClass(value);
 $("#layout").addClass($('#layout :selected').val());
});
于 2013-03-15T14:15:19.227 に答える
0

してみたい

$("#layout").change(function () {
    $("#layoutblock").removeAttr("class");
    $("#layoutblock").attr("class", $("#layout option:selected").val()); 

    //Optional alert showing the new class of the div
    alert($("#layoutblock").attr("class"));
});

デモ： http： //jsfiddle.net/MvxLf/

于 2013-03-15T14:22:18.460 に答える