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');
            }

        }
    });

}）;

进行了上述更改，现在div“1”的类随着滑动而改变。但是当ui.slider值为25时，我必须将div“1”的类更改为“res2”，并将类更改为“res3”当ui.slider值为50.我使用了上面的代码。但我无法获得所需的输出。请帮助

Answer 1

您在功能参数''中错过了hasClass(res1)（引号）。

因此使用

    if($("#1").hasClass('res1')){
      $("#1").toggleClass('res1 res2');
    }

并且还从ID属性中删除#，因此使用

<div id="1" class="res1" style="margin:10px auto">

DEMO

此外，如果您想使用

<div id="#1" class="res1" style="margin:10px auto"></div>

将您的选择器更改为$("#\\#1")，即您需要使用#

转义\\

DEMO使用#as literal

Answer 2

有多个问题

<div id="1" class="res1" style="margin:10px auto"></div>
<!-- the id started with #-->

然后

$(function () {
    $("#slider").slider({
        animate: "fast",
        value: 0,
        min: 0,
        max: 50,
        step: 25,
        slide: function (event, ui) {
            //res1 was not enclosed within ''
            if ($("#1").hasClass('res1')) {
                $("#1").toggleClass('res1 res2');
            }
        }
    });
});

演示：Fiddle

Answer 3

试试这个，你做错了2个，1个是#1，另一个是js hasClass(res1)

HTML

<div id="slider" align="center" style="width:50%;margin-left:20%;" >ds</div>
    <div id="1" class="res1" style="margin:10px auto">sds
    </div>

JQuery的

$(function() {
$( "#slider" ).slider({
    animate:"fast", 
    value:0,
    min: 0,
    max: 50,
    step: 25,
    slide: function( event, ui ) {
        if($("#1").hasClass('res1')){
            $(".res1").toggleClass('res2');
            }
        }
    });
 });

Demo

如何使用jquery ui slider更改div的类

3 个答案: