Question

我现在看到我正在复制粘贴错误的文字/问题，这根本没有意义！对不起！我在代码中发现了错误。这是一个工作版本：

<!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>

Answer 1

~~你没有告诉我们问题是什么，但是：~~

你已经说过代码工作（如果是这样，它将不可靠;见下文）如果你把标记放在HTML中，但是如果你使用代码附加标记则不行。您引用的代码不会出现这个问题，因为它清楚地显示您正在追加然后搜索“.image”元素，但您需要确保执行执行此操作在运行其他代码之后附加，并且在body标记准备好附加内容后，您需要执行这些操作。确保您的脚本位于结束</body>标记之后（或之前），或者使用jQuery ready函数（或其shortcut）。

单独：

jQuery的css函数不支持速记属性，尽管它们适用于某些浏览器。每the docs：

不支持速记CSS属性（例如边距，背景，边框）。例如，如果要检索渲染的边距，请使用：$(elem).css('marginTop')和$(elem).css('marginRight')，依此类推。

所以这一行：

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

应该是

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

另外，请注意每次执行$(this)，它需要多次函数调用和内存分配。最好的做法是不要不必要地重复它;虽然它通常是无害的，但会造成不必要的内存流失。只需将var $this = $(this);放在函数的开头，然后在整个过程中使用$this（或者您想要调用它的任何其他内容）。（其中一个问题：请务必记住this在每个函数中[可能]发生更改，因此如果您正在设置事件处理程序，请不要使用外部函数$this您要使用的地方事件处理程序的版本。）

Answer 2

你需要用

包装这段代码

$(function() {

    });

这样它将在运行jquery代码之前首先加载正文。还要确保max_width和max_height设置为此代码中未设置的max_width和max_height。

每个在jquery之后追加

2 个答案: