如何使用jquery ui滑块更改div的类
如何使用jquery ui滑块更改div的类
提问于 2013-12-27 17:06:49
<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');
}
}
});})；
进行了上述更改，现在使用sliding.But更改了div "1“的类。当ui.slider值为25时，必须将div "1”的类更改为"res2“，当ui.slider值为50时，必须将类"res3”更改为“res3”。我使用上面的code.But时，无法获得作为desired.Please帮助的输出
回答 3
Stack Overflow用户
发布于 2013-12-27 17:09:53
函数参数hasClass(res1)中缺少'' (引号)。
因此使用
if($("#1").hasClass('res1')){
$("#1").toggleClass('res1 res2');
}并从ID属性中删除#，因此使用
<div id="1" class="res1" style="margin:10px auto">此外，如果您要使用
<div id="#1" class="res1" style="margin:10px auto"></div>将选择器更改为$("#\\#1")，即需要使用\\转义#
使用#作为文字的
Stack Overflow用户
发布于 2013-12-27 17:11:22
有多个问题
<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
Stack Overflow用户
发布于 2013-12-27 17:12:22
试试这个，你做错了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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20797814
复制相关文章
相似问题
腾讯云开发者
