jquery onclick добавить z-index, снова отменить последний элемент

Question

jquery onclick добавить z-index, снова отменить последний элемент

0

У меня есть следующий скрипт, найденный здесь. с увеличением я нажимаю z-index. Но теперь я хочу, чтобы последний элемент был восстановлен в исходное состояние. это как-то?

http://jsfiddle.net/dd5Wp/1/

$(function () {
    /*$("div.box").click(function() {
        console.log("start");

    })*/
    // Change this selector to find whatever your 'boxes' are
    var boxes = $("div.box");
    // Set up click handlers for each box
    boxes.click(function () {
        var el = $(this), // The box that was clicked
            max = 0;
        // Find the highest z-index
        boxes.each(function () {
            // Find the current z-index value
            var z = parseInt($(this).css("z-index"), 10);
            // Keep either the current max, or the current z-index, whichever is higher
            max = Math.max(max, z);
        });
        // Set the box that was clicked to the highest z-index plus one
        el.css("z-index", max + 1);
        /* hide and show the content*/
    });
});

herrsaidy 11 нояб. 2013, в 14:20

Источник

0

Можете ли вы уточнить подробнее?
Chirag Vidani 11 нояб. 2013, в 13:04
0

Что вы подразумеваете под «последним элементом» и «исходным состоянием»?
Haywire 11 нояб. 2013, в 13:07
0

Вы ищете что-то вроде этого: jsfiddle.net/dd5Wp/2
Joke_Sense10 11 нояб. 2013, в 13:11
0

У меня есть шесть изображений, первое имеет z-индекс 10, второе - z-индекс 9 и т. Д., Когда я нажимаю на него, второе изображение увеличивает свой z-индекс до 11. Теперь я нажимаю на третье изображение, а затем z-index из 2 оригинальных картинок стоит вернуться к своей спине. Я надеюсь, вы понимаете, мой английский не очень хорошо
herrsaidy 11 нояб. 2013, в 13:12
0

@herrsaidy Ваш недавно принятый ответ - с ошибками. Просто перейдите по предоставленной им ссылке и непосредственно нажмите на третье изображение.
Rajaprabhu Aravindasamy 11 нояб. 2013, в 14:03

Показать ещё 3 комментария

Теги:

jquery

z-index

2 ответа

0

Я просто работал над вашим делом и, наконец, нашел решение, ваше дело действительно нуждается в пирамидальном подходе. Просто учтите, что элемент с щелчком должен быть верхней частью пирамиды.

как это:

     ----   Clicked element (Assume that it should have z-index 4) 
  ----  ----  (Assume that it should have z-index 3) 
 ----    ----  (Assume that it should have z-index 2)
----      ----  (Assume that it should have z-index 1)

Поэтому, чтобы достичь этого, я просто использовал prevAll, чтобы получить левые части и nextAll, чтобы получить нужные фрагменты. И после этого я просто прошел через них и назначил z-индекс, уменьшившись с верхнего z-индекса.

$(function() {

    var boxes = $("div.box");
    var boxesLength = $("div.box").length;
    var count;

    boxes.click(function() {            

        var el = $(this);
        el.css("z-index", boxesLength);

        count = boxesLength -1;
        el.prevAll(".box").each(function(){
             $(this).css("z-index", count);
             count -= 1;
        });

        count = boxesLength -1;
        el.nextAll(".box").each(function(){
             $(this).css("z-index", count);
             count -= 1;
        });

    });
});

LIVE - DEMO

Rajaprabhu Aravindasamy 11 нояб. 2013, в 11:16

Ещё вопросы

Что вы подразумеваете под «последним элементом» и «исходным состоянием»?
Вы ищете что-то вроде этого: jsfiddle.net/dd5Wp/2
У меня есть шесть изображений, первое имеет z-индекс 10, второе - z-индекс 9 и т. Д., Когда я нажимаю на него, второе изображение увеличивает свой z-индекс до 11. Теперь я нажимаю на третье изображение, а затем z-index из 2 оригинальных картинок стоит вернуться к своей спине. Я надеюсь, вы понимаете, мой английский не очень хорошо
@herrsaidy Ваш недавно принятый ответ - с ошибками. Просто перейдите по предоставленной им ссылке и непосредственно нажмите на третье изображение.

BeNdErR · Accepted Answer · 2013-11-11T11-03-00.000Z

если я правильно понял, каждое изображение должно вернуться к исходному z-index после нажатия на другое изображение.

Посмотрите здесь, может быть, это то, что вам нужно: http://jsfiddle.net/dd5Wp/1/

КОД

boxes.click(function() {
    var el = $(this), 
        max = 0;

    boxes.each(function() {

        //--- If a previous state is found, restore it
        if($(this).data("original-index")){
            $(this).css("z-index", $(this).data("original-index"));
        }
        var z = parseInt( $( this ).css( "z-index" ), 10 );
        max = Math.max( max, z );
    });

    //--- save the clicked element previous z-index
    el.data("original-index", el.css("z-index"));
    el.css("z-index", max + 1 );
});

ps: "поведение кликов" работает не очень хорошо, потому что div-обтекание изображения (которое содержит поведение клика) больше, чем само изображение