Javascript 如何使用jQueryUI滑块更改div的类 $（函数（）{ $（“#滑块”）.滑块({ 动画：“快”， 值：0， 分:0,， 最高：50， 步骤：25， 幻灯片：功能（事件、用户界面）{ 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”，当ui.slider值为50时，必须将div“1”的类更改为“res3”。我使用了上述代码。但我无法获得所需的输出。请帮助您错过了

'

（引号）在函数参数中

hasClass（res1）

因此使用

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

        }
    });

并从ID属性中删除

#

，以便使用

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

---

另外，如果您想使用

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

将选择器更改为

$（“\\\\\\\\\\\\\\\\\\\\\\\\\\/code>，即需要使用
\\\
转义

与#as literal
相比，存在多个问题

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

演示：
试试这个，你做错了两个，一个是-is
\1
，另一个是js
hasClass（res1）

HTML

您认为使用id=“#1”并使用选择器$（“#1”）可以吗？如果您有新的要求，您应该问一个新问题。你对问题的修改完全改变了答案的含义。简言之，他们被认为是不正确的，所以我强烈建议问一个新问题
<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');
            }
        }
    });
});

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

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