使用jQuery UI滑块更改div的类

Question

<div id="slider" align="center" style="width:50%;margin-left:20%;" >
</div>
<div id="1" class="res1" style="margin:10px auto">
</div>
<script>
$(function() {
    $( "#slider" ).slider({
        animate:"fast", 
        value:0,
        min: 0,
        max: 50,
        step: 25,
        slide: function( event, ui ) {
            if(($("#1").hasClass('res1'))&& (ui.value=25)){
                $(".res1").toggleClass('res1 res2');
            }
            else if(($("#1").hasClass('res2'))&& (ui.value=50)){
                $(".res2").toggleClass('res2 res3');
            }
            else if(($("#1").hasClass('res2'))&& (ui.value=50)){
                $(".res2").toggleClass('res2 res3');
            }    
        }
    });
});
</script>

当ui.slider值为25时，我必须将id为“ 1”的div的类更改为“ res2”（div的初始类为'res1'），而当ui.slider值为50.I时，将类更改为“ res3”。使用了上面的代码。但是我无法获得所需的输出。请帮助

Answer 1

尝试

$(function () {
    var classes = {
        0: 'res1',
        25: 'res2',
        50: 'res3'
    }
    $("#slider").slider({
        animate: "fast",
        value: 0,
        min: 0,
        max: 50,
        step: 25,
        slide: function (event, ui) {
            $("#1").removeClass().addClass(classes[ui.value])
        }
    });
});

演示： 小提琴

Answer 2

尝试这个：

if ($("#1").hasClass('res1') && (ui.value = 25)) {
    $("#1").removeClass('res1').addClass('res2');
} else if ($("#1").hasClass('res2') && (ui.value = 50)) {
    $("#1").removeClass('res2').addClass('res3');
}

Answer 3

试试这个$("#1").addClass("res2");

有关完整文档，请阅读http://api.jquery.com/addClass/