1

我有一个带有图像的网页。用户可以单击图像来显示（）或海德（）这些图像。

有时，用户会打开一个弹出窗口来观看视频。

然后代码 hide() 之前打开的所有元素。

当用户关闭视频时，我需要知道之前打开了哪些元素以便只显示它们。

最好的方法是什么？

我做了什么：

我创建了一个数组，并将图像名称推入其中。

var arr_popup_open = [];

然后，当用户打开弹出窗口并隐藏所有元素时调用此函数：

function toggleAllPopup() {
if( $('#popup_micro_1').is(":visible"))
        {
            $('#popup_micro_1').hide();
            arr_popup_open.push('#popup_micro_1');
        }
if( $('#popup_micro_2').is(":visible"))
        {
            $('#popup_micro_2').hide();
            arr_popup_open.push('#popup_micro_2');
        }
if( $('#popup_micro_3').is(":visible"))
        {
            $('#popup_micro_3').hide();
            arr_popup_open.push('#popup_micro_3');
        }
    }
// and so on ... I have 7 images so it seems it's not very well optimized

当我只需要显示以前打开的图像时，我执行此代码，循环显示（）数组中的元素。

$('#close_pop_up').click(function() {
    for(var i= 0; i < arr_popup_open.length; i++)
    {
        $(arr_popup_open[i]).show();
    }
});

你怎么看？有更好的方法吗？

4

2 回答 2

2

有几种方法可以使用 jQuery 来解决这个问题。您的方式应该可行，但是如果您想减少代码量，可以执行以下操作：

var visibleDivs = $('div:visible', '#ContainerDiv');

或者，您可以在显示所有可见元素并使用它们时将特定类添加到：

var visibleDivs = $('.someClassName');

由于弹出窗口而隐藏它们时，您可以将列表存储在任何元素的数据中。在这种情况下，将其放在 #close_pop_up 上可能有意义：

visibleDivs.hide();
$('#close_pop_up').data('myDivs', visibleDivs);

当您想在点击功能中再次显示它们时：

$('#close_pop_up').click(function() {
    $(this).data('myDivs').show();
});
于 2013-01-13T17:26:49.607 回答
1

在我看来很好。只需记住arr_popup_open在 toggleopen 函数的开头清除即可。

如果您真的想要，您可以做的替代方法是将打开或关闭的信息保留在 Javascript 变量中，这些变量会在您打开和关闭事物时更新。这样你就不需要依赖复杂的东西，比如is(:visible)

于 2013-01-13T17:20:42.753 回答