jQuery 选择器 eq:() 不起作用
jQuery selector eq:() not working
我用纯CSS/jQuery做了一个切换按钮,一切都很好。当我复制它并尝试切换它时,问题就来了。正如假设的那样,切换开关同时"切换",这是我到目前为止的代码:
.HTML
<div id="container">
<div id="switch-1"><div class="light-1"></div><div class="switch"><div class="space"><div class="circle"></div></div></div><div class="light-2"></div></div><br><br>
<div id="switch-2"><div class="light-1"></div><div class="switch"><div class="space"><div class="circle"></div></div></div><div class="light-2"></div></div>
</div>
jQuery
$(function(){
$('.space').click(function(){
if($('.circle').hasClass("detector")){
$('.circle').animate({ marginLeft: "2px"}, "slow", function(){$('.light-1').css("background","#8e3135"); $('.light-2').css("background","#adafb2"); $('.circle').removeClass("detector");});
} else {
$('.circle').animate({ marginLeft: "47px"}, "slow", function(){$('.light-1').css("background","#adafb2"); $('.light-2').css("background","#8e3135"); $('.circle').addClass("detector");});
}
});
$('.space').eq(1).click(function(){
if($('.circle').eq(1).hasClass("detector-1")){
$('.circle').eq(1).animate({ marginLeft: "2px"}, "slow", function(){$('.light-1').eq(1).css("background","#8e3135"); $('.light-2').eq(1).css("background","#adafb2"); $('.circle').eq(1).removeClass("detector-1");});
} else {
$('.circle').eq(1).animate({ marginLeft: "47px"}, "slow", function(){$('.light-1').eq(1).css("background","#adafb2"); $('.light-2').eq(1).css("background","#8e3135"); $('.circle').eq(1).addClass("detector-1");});
}
});
});
或者Jsfiddle:
http://jsfiddle.net/ew0s6nqd/
这就是它的工作原理,当您单击切换开关时,它会检测它是否具有一个名为"检测器"的类。如果没有,它将对切换进行动画处理并创建一个切换。如果是这样,则意味着该类是先前创建的,因此它会以动画形式恢复切换并删除该类。
好的,当我复制切换开关时,问题就开始了。我现在有两个我想单独激活。最简单的解决方案是使用:eq()
jQuery选择器或.eq()
jQuery函数,人们将其归类为更"正确"的选项。
所以我将其添加到第二个切换的代码中,但它不起作用。在上面的小提琴中,您可以自己测试它。如果有人知道问题出在哪里,请告诉我,谢谢!
编辑:我已经使用了:eq()
选择器,但它也不起作用。
编辑2:我使用一个名为"detector-1"的不同检测器类来防止它干扰另一个。
$(function () {
//the click function for every element with the .space class
$('.space').click(function () {
//check on the .circle child of the clicked .space using "this"
if ($('.circle', this).hasClass("detector")) {
//and animate it
$('.circle', this).animate({
marginLeft: "2px"
}, "slow", function () {
// since we are in the animate callback, "this" is now the
// .circle of the clicked .space
// we want the lights to change - so we have to travel the dom upwards
// 1st .parent() brings us to .space
// 2nd .parent() leads us to .switch
// siblings() let us find the .light-1 element
$(this).parent().parent().siblings('.light-1').css("background", "#8e3135");
// same here for light-2
$(this).parent().parent().siblings('.light-2').css("background", "#adafb2");
$(this).removeClass("detector");
});
} else {
$('.circle', this).animate({
marginLeft: "47px"
}, "slow", function () {
$(this).parent().parent().siblings('.light-1').css("background", "#adafb2");
$(this).parent().parent().siblings('.light-2').css("background", "#8e3135");
$(this).addClass("detector");
});
}
});
});
使用 this 选择器,您只需定义一次点击处理程序 - 它仍然适用于无限数量的按钮......"见工作小提琴"
忘了提。 我更改了您小提琴中的 CSS,因为背景图像没有显示,我通过 CSS 创建了一个白色圆圈......
多亏了@BhushanKawadkwar我想出了如何做到这一点
我不得不在单击功能上使用:eq()
选择器,在其他功能中使用.eq()
功能。我不知道为什么,但它有效,这是工作小提琴:
http://jsfiddle.net/ew0s6nqd/2/
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- 动态填充Bootstrap选择选择器:change event dos'不起作用
- jQuery日期选择器在Codeigniter和Bootsrap模式表单中不起作用
- JQuery日期选择器在IE 7上不起作用
- 棱角分明的日期选择器;在ngDialog中不起作用
- jQuery选择器在脚本中不起作用,但在控制台中工作
- 属性选择器不起作用(语法错误、无法识别的表达式)
- 类选择不起作用的 css 选择器
- onchange Jquery 在使用选择器更改值时不起作用
- asp.net jquery 日期选择器不起作用
- 以选择器^=开头的css在用javascript更改类后不起作用
- 在mvc上使用日期选择器不起作用
- jquery children选择器没有'不起作用
- 带有变量选择器的 Jquery 不起作用
- 日期选择器在动态添加的行中不起作用
- Bootstrap日期选择器中的更新不起作用
- 选项“;daysOfWeekDisabled”;在引导程序日期时间选择器中不起作用
- JavaScript id 选择器不起作用?不知道出了什么问题
- 循环遍历类名索引不起作用..选择
- .trigger(' selected:updated')不起作用.选择v1.6.1