Сохранение предыдущего (этого), чтобы скрыть ранее нажатое событие

Question

Я делаю карту с кучей кнопок, на которые вы можете нажать, вы можете проверить вайп здесь:

http://kareldc.com/grimonprez/index.html

У меня проблема с кнопкой. Вы нажимаете кнопку на карте с идентификаторами: # world_map1, # world_map2 и т. Д., И появляется панель. Я использую фильтрацию имен Jquery, чтобы сделать это. Внутри функции я использую .this для ссылки на селектор панели, который должен отображаться с использованием названия кнопки, т.е. # World_map_1_panel_container.

Это все работает. Я сделал так, чтобы при нажатии на карту все исчезало.

Но я пытаюсь скрыть панель на дисплее при нажатии новой кнопки. Я пытался использовать переменные, но я немного застрял из-за локальной области видимости, я думаю. И я ищу более эффективный метод.

---

Здесь вы нажимаете кнопку, и отображается панель.

$('#'+'[id^="world_map"]').click(function() {

     var that = this.id;

        $('#' +that+ '_panel_container')
                .css('visibility','visible')
                .css('display','inline')
                .css('z-index','8000')
                .animate({"opacity" : 1}, 150, function() { });

Они скрывают активные панели при нажатии кнопки, я перемещаю их назад.

        $('#world_map_1').click(function() {    $('#' +that+ '_panel_container').css('z-index','-8000');        });
        $('#world_map_2').click(function() {    $('#' +that+ '_panel_container').css('z-index','-8000');        });
        $('#world_map_3a').click(function() {   $('#' +that+ '_panel_container').css('z-index','-8000');        });
        $('#world_map_3b').click(function() {   $('#' +that+ '_panel_container').css('z-index','-8000');        });
        $('#world_map_4').click(function() {    $('#' +that+ '_panel_container').css('z-index','-8000');        });
        $('#world_map_5a').click(function() {   $('#' +that+ '_panel_container').css('z-index','-8000');        });
        $('#world_map_5b').click(function() {   $('#' +that+ '_panel_container').css('z-index','-8000');        });
        $('#world_map_6').click(function() {    $('#' +that+ '_panel_container').css('z-index','-8000');        });
        $('#world_map_71').click(function() {   $('#' +that+ '_panel_container').css('z-index','-8000');        });
        $('#world_map_72').click(function() {   $('#' +that+ '_panel_container').css('z-index','-8000');        });
        $('#world_map_73').click(function() {   $('#' +that+ '_panel_container').css('z-index','-8000');        });
        $('#world_map_8').click(function() {    $('#' +that+ '_panel_container').css('z-index','-8000');        });
        $('#world_map_9').click(function() {    $('#' +that+ '_panel_container').css('z-index','-8000');        });
        $('#world_map_10').click(function() {   $('#' +that+ '_panel_container').css('z-index','-8000');        });
        $('#world_map_11').click(function() {   $('#' +that+ '_panel_container').css('z-index','-8000');        });
        $('#world_map_12').click(function() {   $('#' +that+ '_panel_container').css('z-index','-8000');        });

});

Это работает, но очень нестабильно. На карте мира все работает гладко. Но когда вы нажимаете на увеличительное стекло Ближнего Востока, применяется тот же принцип, но для другой карты, но по какой-то причине браузер не отправляет слои на -8000.

Если вам нужна дополнительная информация о html или css, пожалуйста, спросите, я весь день безуспешно просматриваю этот код ...

это полный скрипт, который я использую для world_map, middle_east_map и cuba_map. http://kareldc.com/grimonprez/js/script.js

это скрипт, который я использую для наведения мыши, масштабирования и других вещей. http://kareldc.com/grimonprez/js/finalcode.js

css для карт можно найти здесь (перетаскиваемый материал) http://kareldc.com/grimonprez/css/fixed_elements.css

CSS для панелей можно найти здесь:

http://kareldc.com/grimonprez/css/world_map_panels.css
http://kareldc.com/grimonprez/css/middle_east_map_panels.css

Answer 1

У меня есть простое решение для вас.Вам не нужно столько обработчиков событий click для всех карт мира, чтобы восстановить значения zIndex.

var zIndex = 8000;
$('#'+'[id^="world_map"]').click(function() {

     var that = this.id;

        $('#' +that+ '_panel_container')
                .css('visibility','visible')
                .css('display','inline')
                .css('z-index', zIndex++)
                .animate({"opacity" : 1}, 150, function() { });
});