jQuery-更改类中除';这';
我需要它,所以当我单击“mydiv”类的一个div时,该类的所有div的z索引都为1,除了我单击的div,它的z索引为2 再次单击div需要将其z索引更改回1 到目前为止,我得出了以下结论:jQuery-更改类中除';这';,jquery,css,z-index,Jquery,Css,Z Index,我需要它,所以当我单击“mydiv”类的一个div时,该类的所有div的z索引都为1,除了我单击的div,它的z索引为2 再次单击div需要将其z索引更改回1 到目前为止,我得出了以下结论: $('.mydiv').toggle(function() { $('.mydiv').css('z-index','1'); $(this).css('z-index','2'); }, function() { $(this).css('z
$('.mydiv').toggle(function() {
$('.mydiv').css('z-index','1');
$(this).css('z-index','2');
}, function() {
$(this).css('z-index','1');
});
如果在单击另一个div之前单击一个div,然后再次单击它(将z-index返回到1),则可以正常工作
但是,如果您单击一个div,然后单击另一个div而不单击第一个div(将其切换回z-index 1),有时它会工作,有时它不会做任何事情。我假设问题出现在我代码的第一部分,因为:
$('.mydiv').css('z-index','1');
不总是在此之前运行:
$(this).css('z-index','2');
这就是问题所在吗?如果是,我该如何解决?
谢谢
更新-很抱歉一开始没有想到这一点,但是我简化了我的问题,实际页面需要css定位动画。因此,当您单击div时,它会以平滑动画移动。我想这意味着我不能仅仅通过切换一个类来改变css。
谢谢
-
更新2-我认为我已经可以工作了,然后我在IE8和IE7中进行了测试。IE9是可以的(和我测试过的其他浏览器一样),但当你点击其中任何一个时,IE7和IE8会让所有的图像跳转。这是演示(所有css和jQuery都在页面中):
下面是jQuery:
$(".image-div").click(function () {
var divRefTwo = $(".image-div").not(this);
$(".image-div").not(this).animate({
width: '250px',
left: '0px',
marginRight: '0px',
backgroundPosition: '-125px'
}, 400, function() {
$(divRefTwo).css('z-index','1');
});
if ($(this).css('z-index') == 1) {
$(this).css('z-index','2');
$(this).animate({
width: '500px',
left: '-125px',
marginRight: '-250px',
backgroundPosition: '0px'
}, 500, function() {
//
});
}
else {
var divRef = this;
$(this).animate({
width: '250px',
left: '0px',
marginRight: '0px',
backgroundPosition: '-125px'
}, 500, function() {
$(divRef).css('z-index','1');
});
}
});
我想发生的是:div的背景图像位置。image-div从-125px开始。单击div.image-div时,jQuery会将同一类的所有其他div的背景位置设置为-125px。只有扩展的div应该更改,因为其他div的背景位置已经是-125px
出于某种原因,IE将背景位置重置为0,然后将动画设置为-125px。因此,动画最终会出现在正确的位置,但会在不应该出现的情况下设置动画以获得其效果
知道为什么会这样吗?这是jQuery IE bug还是CSS选择器层次结构?
谢谢我认为是切换部分在这里造成了额外的混乱。您可以这样完全避免它:
$('.mydiv').click(function() {
var current = $(this).css('z-index');
$('.mydiv').css('z-index','1');
$(this).css('z-index', (current == '1' ? '2' : '1'));
});
所以现在我们又改变了一切。根据OP编辑,现在代码为:
$(".mydiv").click(function () {
var $t = $(this);
$t.siblings().css("z-index", 1).animate({
"margin-top": 0
}, "fast");
if ($t.css("z-index") == 1)
$t.css("z-index", 2).animate({
"margin-top": -10
});
else
$t.css("z-index", 1).animate({
"margin-top": 0
}, "fast");
});
这是你的电话号码
现在让我解释一下代码的逻辑
// Since we'll use $(this) (the clicked div) in many places
// of the code, I started caching it in a var named $t.
var $t = $(this);
// Then I get all the siblings (The other divs that are beside this,
// or are children of the same parent). The I change back all this divs to
// z-index = 1 and animate their top down to 0.
$t.siblings().css("z-index", 1).animate({ "margin-top": 0 }, "fast");
// Next we have the if statement to check if the clicked div is with
// z-index = 1 (unclicked) or z-index = 2 (already clicked).
if ($t.css("z-index") == 1)
// Then we change the current div to z-index = 2 and animate it 10px upper.
$t.css("z-index", 2).animate({ "margin-top": -10 });
// Or else we change back the current div to z-index = 1 and animate it down.
$t.css("z-index", 1).animate({ "margin-top": 0 });
以下是来自以下站点的
.toggle()
说明:
将两个或多个处理程序绑定到匹配的元素,在交替单击时执行
这意味着第一个函数将在每次单击元素时执行偶数,第二个函数将在每次单击元素时执行奇数。这不是你真正想要的行为
您可以这样做:
$('.mydiv').click(function() {
if ($(this).css('z-index') == 2)
$(this).css('z-index', 1);
else {
$('.mydiv').css('z-index', 1);
$(this).css('z-index', 2);
}
});
这不是OP想要的。您没有处理这种情况:“再次单击div需要将其z索引更改回1。”感谢您的回答@ErickPetru。恐怕我没有提到我需要的全部功能。我更新了我的问题。Thanks@ErickPetru你能解释一下代码的第一部分是做什么的吗?我理解if-end-else语句,但是在它之前做什么呢?再次感谢。我将用解释更新答案。@ErickPetru很抱歉在这么长时间后回来,但我发现了IE7和IE8问题。我被问题更新了。谢谢