Question

我正在尝试通过下拉列表中的值在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>

任何想法，谢谢

此致说

Answer 1

jsFiddle Demo

$(function () {
    $("#layout").change(function () {
        $('#layoutblock')[0].className = "row " + $(this).val();
    });
});

Answer 2

试试这段代码，

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/

Answer 3

试试这个：

$("#layout").change(function () {
    $('#layoutblock')
        .removeClass()
        .addClass("row")
        .addClass($(this).val());
})
.change();

Answer 4

试试这个

$("select option:not(:selected)").each(function () {    
var value  = $(this).val();
$("#layout").removeClass(value);
 $("#layout").addClass($('#layout :selected').val());
});

Answer 5

想尝试

$("#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/

从Select更改班级

5 个答案:

jsFiddle Demo