[英]jQuery - Change css for all divs of a class except 'this'
I need it so when I click on a div of class 'mydiv', all divs of that class have a z-index of 1, except for the div I clicked on which as a z-index of 2.我需要它,所以当我单击 class 'mydiv' 的 div 时,该 class 的所有 div 的 z-index 为 1,除了我单击的 div 的 z-index 为 2。
Clicking on the div again needs to change its z-index back to 1.再次单击 div 需要将其 z-index 更改回 1。
So far ive come up with the following:到目前为止,我想出了以下内容:
$('.mydiv').toggle(function() {
$('.mydiv').css('z-index','1');
$(this).css('z-index','2');
}, function() {
$(this).css('z-index','1');
});
If you click on a div and then click on it again (returning the z-index to 1) before clicking on another one it works fine.如果您单击一个 div,然后在单击另一个 div 之前再次单击它(将 z-index 恢复为 1),它可以正常工作。
However if you click on a div, and then click another one without clicking the first one (to toggle it back to z-index 1), sometimes it works and sometimes it doesn't do anything.但是,如果您单击一个 div,然后单击另一个而不单击第一个(将其切换回 z-index 1),有时它会起作用,有时它不会做任何事情。 Im assuming the problem is in the first part of my code because this:
我假设问题出在我的代码的第一部分,因为:
$('.mydiv').css('z-index','1');
Is not always run before this:在此之前并不总是运行:
$(this).css('z-index','2');
Is that the problem and if so how can I fix this?这是问题吗?如果是,我该如何解决? Thanks
谢谢
UPDATE - Sorry for not thinking of this initially, but ive simplified my question here, the actual page will need to have css positioning animations.更新 - 很抱歉最初没有想到这一点,但我在这里简化了我的问题,实际页面需要有 css 定位动画。 So when you click on a div it moves with a smooth animation.
因此,当您单击一个 div 时,它会以平滑的 animation 移动。 I think that means I cant just change the css by toggling a class.
我认为这意味着我不能通过切换 class 来更改 css。 Thanks
谢谢
- -
UPDATE 2 - I thought I had this working, and then I tested in IE8 and 7. IE9 is ok (along with every other browser I tested with) but IE7 and IE8 make all of the images jump around when you click on any of them.更新 2 - 我以为我有这个工作,然后我在 IE8 和 7 中进行了测试。IE9 还可以(以及我测试过的所有其他浏览器)但是 IE7 和 IE8 使所有图像在您单击其中任何一个时都会跳来跳去. Here is the demo (all css and jQuery are within the page):
这是演示(所有 css 和 jQuery 都在页面内):
http://smartpeopletalkfast.co.uk/jquery/basicDemo12-bugfix-3.htm http://smartpeopletalkfast.co.uk/jquery/basicDemo12-bugfix-3.htm
And here is the 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');
});
}
});
I think whats happening is this: The background image position for div.image-div starts at -125px.我认为发生的事情是这样的:div.image-div 的背景图像 position 从-125px 开始。 When you click a div.image-div, jQuery animates the background position for all the other divs of the the same class to -125px.
当您单击 div.image-div 时,jQuery 将同一 class 的所有其他 div 的背景 position 设置为 -125px。 Only divs that are expanded should change, as the other divs already have background position of -125px.
只有扩展的 div 应该更改,因为其他 div 已经具有 -125px 的背景 position。
For some reason IE resets the background position to 0, and then animates to -125px.由于某种原因,IE 将背景 position 重置为 0,然后将动画设置为 -125px。 So the animation ends up in the correct place, but animates to get their when it shouldn't.
所以 animation 最终会出现在正确的位置,但会在不应该出现的时候进行动画处理。
Any ideas why this is happening?任何想法为什么会发生这种情况? Is this a jQuery IE bug or a CSS hierarchy of selectors thing?
这是 jQuery IE 错误还是选择器的 CSS 层次结构? Thanks
谢谢
I think it's the toggle part that causes extra confusion here.我认为这是造成额外混乱的切换部分。 You can avoid it altogether like this:
您可以像这样完全避免它:
$('.mydiv').click(function() {
var current = $(this).css('z-index');
$('.mydiv').css('z-index','1');
$(this).css('z-index', (current == '1' ? '2' : '1'));
});
So now we changed everything again.所以现在我们再次改变了一切。 Based on the OP edit, now the code would be:
基于 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");
});
Here is the again updated working sample .这是再次更新的工作示例。
Now let me explain the logic of the code.现在让我解释一下代码的逻辑。
// 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 });
Here is the description of .toggle()
from the jQuery API :这是 jQuery API中对
.toggle()
的描述:
Bind two or more handlers to the matched elements, to be executed on alternate clicks.
将两个或多个处理程序绑定到匹配的元素,以在交替单击时执行。
This means that the first function will execute every even time the element is clicked and the second function will execute every odd time the element is clicked.这意味着第一个 function 将在每次单击元素时执行,第二个 function 将在每个奇数次单击元素时执行。 This is not really the behavior you want.
这不是您真正想要的行为。
You could do this instead:你可以这样做:
$('.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);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.