追加後のjquery

私は間違ったテキスト/質問を貼り付けてコピーしていましたが、それは全く意味がありませんでした！そのために残念！私は自分のコードでエラーが見つかりました。ここでは作業バージョンは次のとおりです。追加後のjquery

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<style type="text/css"> 
body{ 
margin:0; 
} 
#gallery{ 
width:100%; 
height:100%; 
position:fixed; 
left:0; 
top:0; 
background:#000; 
opacity:0.9; 
} 
.child{ 
width:auto; 
height:auto; 
position:fixed; 
left:0; 
top:0; 
} 
</style> 
</head> 
<body> 
<div id="click_me">click me</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
$('#click_me').click(function(){ 
$('body').append('<div id="gallery"></div><div class="child" style="width:300px;height:600px;background:#0F0"></div><div class="child" style="width:500px;height:400px;background:#C60"></div><div class="child" style="width:600px;height:200px;background:#390"></div>'); 
    height_of_window = $('#gallery').height(); 
    width_of_window = $('#gallery').width(); 
    max_height = height_of_window - 100; 
    max_width = width_of_window - 100; 
    $('.child').each(function() { 
     var $this = $(this); 
     height_of_child = $this.height(); 
     width_of_child = $this.width(); 
     if (width_of_child >= max_width) { 
     $this.css({ 
      'max-width': max_width + 'px' 
     }) 
     } 
     if (height_of_child >= max_height) { 
     $this.css({ 
      'max-height': max_height + 'px' 
     }) 
     } 
     margin_top = (height_of_window - $this.height())/2; 
     margin_left = (width_of_window - $this.width())/2; 
     $this.css({ 
     'margin-top': margin_top + 'px', 
     'margin-left': margin_left + 'px' 
     }) 
    }); // end click 
    }); // end each 
}); // end document redy 
</script> 
</body> 
</html>

出典

2012-01-04 Hakan

問題は何ですか？ –

はより良いbrbを説明します – Hakan

~~あなたは問題が何であるかを私たちに語ったが、していない：~~

あなたはコードがを動作することを言ってきました（もしそうなら、それはできません信頼できる;以下を参照） HTMLにマークアップを入れても、そのマークアップをコードを使って追加した場合は表示されません。あなたが引用しているコードは、あなたが追加していることを明確に示してから、 ".image"要素の検索を行っているので表示されませんが、はに、の前に他のコードを実行して、bodyタグを追加する準備が整ったら、これらの作業を行う必要があります。あなたのスクリプトが終了時、終了時（または終了時）の</body>タグ、またはjQuery ready関数（またはそのshortcut）を使用していることを確認してください。

別に：彼らはいくつかのブラウザでは動作が

jQueryのcss機能は、速記のプロパティをサポートしていません。 Per the docs：

簡略表記のCSSプロパティ（マージン、背景、ボーダーなど）はサポートされていません。たとえば、レンダリングされたマージンを取得する場合は、$(elem).css('marginTop')と$(elem).css('marginRight')などを使用します。

ので、この行：

$(this).css({'margin':margin_top+'px 0 0 '+ margin_left +'px'})

はあなたが$(this)を行うたびことに注意して、

$(this).css({ 
    marginTop: margin_top + 'px', 
    marginLeft: margin_left + 'px', 
    marginRight: "0px", 
    marginBottom: "0px" 
});

別にすべきであり、それはいくつかの関数呼び出しとメモリの割り当てが必要です。不必要に繰り返さないことがベストプラクティスです。通常は無害ですが、不要なメモリチャーンが発生します。関数の先頭にvar $this = $(this);と入力してから、$this（または呼び出したいものは何でも）を使用してください。（1つの問題があります：thisはすべての関数で変更される可能性がありますので、イベントハンドラを設定する場合は、外部ハンドラの$thisを使用しないでください）

出典

2012-01-04 10:49:54

「略式プロパティ」はいくつかのブラウザでのみ機能することを指摘してくれてありがとう！それを知らなかった... – Hakan

あなたはそれがjqueryのコードを実行する前に、まず体をロードするように

$(function() { 

    });

でこのコードをラップする必要があります。また、max_widthとmax_heightがこのコードのように設定されていることを確認してください。

出典

2012-01-04 10:53:46

答えて

関連する問題