каждый в jquery после добавления - PullRequest
Новая
       23

каждый в jquery после добавления

0 голосов
/ 04 января 2012

Теперь я вижу, что копирую неправильный текст / вопрос, который вообще не имеет смысла!Простите за это!Я нашел ошибку в своем коде.Вот рабочая версия: 

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

Ответы [ 2 ]

0 голосов
/ 04 января 2012

вам нужно обернуть этот код с помощью 

$(function() {

    });

, чтобы он сначала загружал тело перед запуском кода jquery.Также убедитесь, что max_width и max_height установлены так, как в этом коде они не установлены.

0 голосов
/ 04 января 2012

Вы не сказали нам, в чем проблема, но:

Вы сказали, что код работает (если это так, он не будет надежным; см. Ниже) , если вы поместите разметку в HTML, но не если вы добавите эту разметку с помощью кода. Код, который вы процитировали, не будет иметь этой проблемы, потому что он ясно показывает, что вы добавляете и затем выполняете поиск элементов ".image", но вы должны быть уверены, что вы do делаете добавление до вы запускаете другой код, и вам нужно сделать это, как только к тегу body будет добавлено что-то. Либо убедитесь, что ваш скрипт находится в самом конце, сразу после (или перед) закрывающего тега </body>, либо используйте функцию jQuery ready (или ее ярлык ).

Отдельно:

Функция jQuery css не поддерживает сокращенные свойства, хотя они работают в некоторых браузерах. За документы :

Сокращенные свойства 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 там, где вы хотите использовать версию обработчика событий .)

...