jQuery - изменить css для всех элементов класса, кроме 'this'

Question

Мне это нужно, поэтому, когда я щелкаю по элементу div класса 'mydiv', все элементы div этого класса имеют z-индекс, равный 1, за исключением элемента div, на который я щелкнул, как z-index, равного 2.

При повторном нажатии на div необходимо изменить его z-index обратно на 1.

Пока что у меня есть следующее:

    $('.mydiv').toggle(function() {
        $('.mydiv').css('z-index','1');
        $(this).css('z-index','2');
    }, function() {
        $(this).css('z-index','1');
    });

Если вы нажмете на divи затем щелкните по нему снова (возвращая z-index в 1), прежде чем щелкнуть по другому, он работает нормально.

Однако, если вы щелкаете по элементу div, а затем щелкаете по другому, не щелкая первый (чтобы переключить его обратно на z-index 1), иногда это работает, а иногда ничего не делает.Я предполагаю, что проблема в первой части моего кода, потому что это:

$('.mydiv').css('z-index','1');

Не всегда выполняется до этого:

$(this).css('z-index','2');

Это проблема, и если да, то как я могупочини это?Спасибо

ОБНОВЛЕНИЕ - Извините, что изначально не думал об этом, но я упростил мой вопрос здесь, на реальной странице должна быть анимация позиционирования CSS.Поэтому, когда вы нажимаете на элемент div, он перемещается с плавной анимацией.Я думаю, это означает, что я не могу просто изменить CSS, переключая класс.Спасибо

-

ОБНОВЛЕНИЕ 2 - Я думал, что у меня это работает, а затем я проверил в IE8 и 7. IE9 в порядке (вместе со всеми другими браузерами, с которыми я тестировал), но IE7 и IE8заставьте все изображения прыгать вокруг, когда вы нажимаете на любое из них.Вот демоверсия (все css и jQuery находятся на странице):

http://smartpeopletalkfast.co.uk/jquery/basicDemo12-bugfix-3.htm

А вот 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 или иерархия селекторов CSS?Спасибо

Answer 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 });

Answer 2

Вот описание .toggle() из jQuery API :

Привязать два или более обработчиков к соответствующим элементам, которые будут выполняться поочередно.

Это означает, что первая функция будет выполняться каждый четный при нажатии элемента, а вторая функция будет выполняться каждый нечетный при нажатии элемента. Это не совсем то поведение, которое вам нужно.

Вы можете сделать это вместо:

$('.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);
    }
});

Answer 3

Я думаю, что это та часть переключения, которая вызывает здесь дополнительную путаницу.Вы можете избежать этого совсем так:

$('.mydiv').click(function() {
    var current = $(this).css('z-index');
    $('.mydiv').css('z-index','1');
    $(this).css('z-index', (current == '1' ? '2' : '1'));
});