1

画像付きのウェブページがあります。ユーザーは画像をクリックして、これらの画像を show() または hyde() できます。

ユーザーがポップアップを開いて動画を視聴することがあります。

次に、コード 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

以前に開いた画像のみを表示する必要がある場合は、このコードを実行して、配列内の要素を show() にループします。

$('#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_opentoggleopen 関数の開始時にクリアすることを忘れないでください。

本当に必要な場合に実行できる代替手段は、何かを開いたり閉じたりするときに更新される Javascript 変数に、何が開いているか閉じているかの情報を保持することです。この方法では、次のような複雑なものに依存する必要はありません。is(:visible)

于 2013-01-13T17:20:42.753 に答える