6

私はモーダルウィンドウを持っています。私がやりたいことは、モーダルが開いたときにページから特定の要素を削除し、モーダルが閉じた後に元の場所に戻すことです。display:none を実行したくありません。非表示にするだけなので、実際にページから削除する必要があります。したがって、テストのためにタイマーの後にそれらを削除して追加するjQueryが少しあります...

更新: コードへのこれらの追加により、要素を前に取得し、同じ要素の後に追加し直すようになりました。問題は、その要素も削除された場合はどうなるかということです。その後、追加されません！また、これでjavascriptのイベントハンドラが失われることはありませんか? 私はプラグインを開発しているので、可能な限りサイトに干渉しないようにする必要がありますが、3D 要素には Safari のバグがあり、回避できません。

人々のサイトにあまり干渉することなく、一時的に 3D 要素を削除する方法についてのアイデアはありますか?

$3delements = $('*').filter(function(){return $(this).css('-webkit-transform-style') == 'preserve-3d'});
$3delementsposition = $3delements.prev()

//On modal open
$3delements.remove();

//On modal close
$3delementsposition.after($3delements);

問題は、要素が元の場所に戻るように、DOM 内の特定の場所を指定する必要があることです。要素が .remove の情報を .append に変更/移動/失わないようにするにはどうすればよいですか。

4

3 に答える 3

9

  1. .detach()およびを使用し.append()て要素を削除および再接続すると、すべてのイベントとデータが維持されます。

  2. 要素を削除した逆の順序で要素を追加し直すと、それらはすべて元の位置に戻るはずです

テストされていないコード

var elems3d = $(...);
var elemsRemoved = [];

// removing
elems3d.each(function(i,o) {
   var elem = $(o);
   elemsRemoved.push({
       loc: elem.prev(),
       obj: elem.detach()
   });
});

// adding back
while (elemsRemoved.length) {
   var elem = elemsRemoved.pop();
   elem.loc.after(elem.obj);
}
于 2012-04-19T08:02:37.030 に答える
5

要素を削除する代わりに、( を使用して) プレースホルダー要素に置き換えてからreplaceWith、必要に応じてプレースホルダーを元のコンテンツに置き換えます。次のようなもの：

$3delements = $('*').filter(function(){return $(this).css('-webkit-transform-style') == 'preserve-3d'});
var originals = [];
$3delements.each(function() {
  // Clone original, keeping event handlers and any children elements
  originals.push($(this).clone(true)); 
  // Create placeholder for original content
  $(this).replaceWith('<div id="original_' + originals.length + '"></div>');
});

///
/// Do something asynchronous 
///

// Replace placeholders with original content
for (var i in originals) {
 $('#original_' + (i + 1)).replaceWith(originals[i]);
}

詳細については、jQuery ドキュメントのcloneおよびを参照してください。replaceWith

于 2012-04-19T06:03:00.003 に答える
-5

私はフィドルを作成しました。これがあなたの要件を満たしているかどうか私に知らせてください。

http://jsfiddle.net/mNsfL/12/

于 2012-04-19T06:12:18.537 に答える