Question

我正在制作一张可以点击的按钮的地图，你可以在这里检查一下：

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

我有按钮问题。您点击地图上带有ID的按钮：＃world_map1，＃world_map2等...然后会出现一个面板。我正在使用Jquery名称过滤来执行此操作。在我使用的函数内部。这是指需要使用按钮名称显示的面板选择器，即。＃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() { });
});

存储上一个（this）以隐藏先前单击的事件

1 个答案: