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)访问当前元素。此外，您动态appending这些元素，因此您应该使用delegation在您的上下文中使用事件.on()。

尝试，

$(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)在当前选择器的上下文中处理animate函数。

访问图像数组中的单个项目

2 个答案: