Question

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

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

然后代码隐藏（）之前打开的所有元素。

当用户关闭视频时，我需要知道先前打开了哪些元素才能显示它们。

最好的方法是什么？

我做了什么：

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

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

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

Answer 1

使用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();
});

Answer 2

对我来说很好看。请记住在toggleopen函数的开头清除arr_popup_open。

如果您真正想要的话，可以做的另一种方法是保留Javascript变量中打开或关闭的信息，这些信息在您打开和关闭时会更新。这样您就不需要依赖复杂的事情，例如is(:visible)

jQuery JavaScript：如何跟踪用户完成的操作？

2 个答案: