Доступ к отдельным элементам в массиве изображений

Question

Мне было интересно, как я могу индивидуально обращаться к элементам из массива изображений, чтобы увеличить высоту и ширину одного элемента, а не весь класс/массив.

<?php 
$imgdir = 'dirimages/'; 
$images = glob($imgdir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE); 
?> 
<script> 
    jQuery(function() { 
     var phpvar = <?php echo json_encode($images) ?>; 
     $.each(phpvar, function (id, image) { 
      jQuery('#slidediv').append('<img class="loadimg" src="' + image + '"/>'); 
     }); 

     $('.loadimg').click(function() { 
      $('.loadimg').animate({height: '500px', width: '500px'}); 
     }); 

    }); 
</script> 

Answer 1

Выбираете все элементы, используя свое имя class. Просто попробуйте получить доступ к текущему элементу, используя $(this). Кроме того, вы используете эти элементы динамически, поэтому в своем контексте вы должны использовать событие delegation, используя .on().

Try,

$(document).on('click','.loadimg', function(){ 
    $(this).animate({height:'500px', width:'500px'}); 
}); 

Answer 2

делегат событие до ближайшего статического родителя:

$('#slidediv').on('click', '.loadimg', function(){ 
    $(this).animate({height:'500px',width:'500px'}); 
}); 

Просто потому, что при загрузке страницы вы не имеют .loading элемент настолько непосредственна связывания события не будет Работа. поэтому вам нужно делегировать событие ближайшему статическому родителю в вашем случае, это #slidediv или вы можете делегировать его самому document, потому что это всегда доступно на странице.

Также вы связали событие с именем класса, чтобы привязать событие к каждому элементу, который имеет это имя класса, поэтому вам нужно работать с функцией анимации в контексте текущего селектора, используя $(this).