Javascript jQuery选择器等式:()不工作
我用纯CSS/jQuery制作了一个切换按钮,所有的功能都很完美。当我复制它并尝试切换它时,问题出现了。正如所设想的,切换同时“切换”,以下是我目前为止的代码: HTMLJavascript jQuery选择器等式:()不工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我用纯CSS/jQuery制作了一个切换按钮,所有的功能都很完美。当我复制它并尝试切换它时,问题出现了。正如所设想的,切换同时“切换”,以下是我目前为止的代码: HTML <div id="container"> <div id="switch-1"><div class="light-1"></div><div class="switch"><div class="space"><div cl
<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>
或者JSFIDLE:
这就是它的工作原理,当您单击切换时,它会检测是否有一个名为“detector”的类。如果没有,它将设置切换的动画并创建一个。如果是这样,则表示该类是先前创建的,因此它会设置切换的动画并删除该类
好的,当我复制切换时问题就开始了。我现在有两个,我想单独激活。最简单的解决方案是使用:eq()
jQuery选择器或.eq()
jQuery函数,人们将其归类为更“正确”的选项
所以我将它添加到第二个切换的代码中,但它不起作用。在上面的小提琴中,你可以自己测试它。如果有人知道问题出在哪里,请告诉我,谢谢
编辑:我已经使用了:eq()
选择器,但它也不起作用
编辑2:我使用一个名为“detector-1”的不同探测器类来防止它干扰另一个探测器。多亏了@bhushankawakwar,我才知道如何制作它 我必须在click函数上使用
:eq()
选择器,在其他函数中使用.eq()
函数。我不知道为什么,但它起作用了,这里是工作小提琴:
多亏了@BhushanKawadkwar,我才知道该怎么做 我必须在click函数上使用
:eq()
选择器,在其他函数中使用.eq()
函数。我不知道为什么,但它起作用了,这里是工作小提琴:
多亏了@BhushanKawadkwar,我才知道该怎么做 我必须在click函数上使用
:eq()
选择器,在其他函数中使用.eq()
函数。我不知道为什么,但它起作用了,这里是工作小提琴:
多亏了@BhushanKawadkwar,我才知道该怎么做 我必须在click函数上使用
:eq()
选择器,在其他函数中使用.eq()
函数。我不知道为什么,但它起作用了,这里是工作小提琴:
使用此选择器,您只需定义一次单击处理程序,它仍然适用于无数个按钮。。。
忘了提了。我改变了你小提琴中的css,因为背景图像没有显示,我通过css创建了一个白色的圆圈
使用此选择器,您只需定义一次单击处理程序,它仍然适用于无数个按钮。。。
忘了提了。我改变了你小提琴中的css,因为背景图像没有显示,我通过css创建了一个白色的圆圈
使用此选择器,您只需定义一次单击处理程序,它仍然适用于无数个按钮。。。
忘了提了。我改变了你小提琴中的css,因为背景图像没有显示,我通过css创建了一个白色的圆圈
使用此选择器,您只需定义一次单击处理程序,它仍然适用于无数个按钮。。。
忘了提了。我在你的小提琴中更改了css,因为背景图像没有显示,我通过css创建了一个白色圆圈…这就是你想要的吗?这很难理解,为什么你有两个事件处理程序,它们对于相同的元素看起来完全一样,这里应该发生什么?@BhushanKawadkar是的,但是当你单击第一个时,两者都将事件对象作为参数传递给处理程序函数。它将允许您确定触发事件的元素,然后仅对单击的一个元素应用切换行为。我认为您真正想要的是->这是您正在寻找的内容?这很难理解,为什么您有两个事件处理程序,它们对于相同的元素看起来完全相同,那么这里应该发生什么?@BhushanKawadkar是的,但是当您单击第一个时,两个movePass事件对象都将作为处理程序函数的参数。它将允许您确定触发事件的元素,然后仅对单击的一个元素应用切换行为。我认为您真正想要的是->这是您正在寻找的内容?这很难理解,为什么您有两个事件处理程序,它们对于相同的元素看起来完全相同,那么这里应该发生什么?@BhushanKawadkar是的,但是当您单击第一个时,两个movePass事件对象都将作为处理程序函数的参数。它将允许您确定触发事件的元素,然后仅对单击的一个元素应用切换行为。我认为您真正想要的是->这是您正在寻找的内容?这很难理解,为什么您有两个事件处理程序,它们对于相同的元素看起来完全相同,那么这里应该发生什么?@BhushanKawadkar是的,但是当您单击第一个时,两个movePass事件对象都将作为处理程序函数的参数。它将允许您确定触发事件的元素,然后仅对单击的元素应用切换行为。更优雅的方式是O-O(面向对象)代码。并且可以缩短,在OP中使用adedneos注释中的三元运算符。是的,没错。但最快的是,使用操作代码,删除第二个单击函数,并使用此选择器^^^这是一个很好的解决方案。更优雅的方式是O-O(面向对象)代码。并且可以缩短,在OP中使用adedneos注释中的三元运算符。是的,没错。但最快的是,使用操作代码,删除第二个单击函数,并使用此选择器^^^这是一个很好的解决方案。更优雅的方式是O-O(面向对象)代码。并且可以缩短,在OP中使用adedneos注释中的三元运算符。是的,没错。但最快的是,取下操作代码,删除第二次单击功能,然后
$(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");});
}
});
});
$(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");
});
}
});
});