Question

我有一个函数cropAndCenterImage()，我需要用它来迭代每个名为.photo-card-image-wrapper的类。我知道如何在jquery中执行each()函数，但cropAndCenterImage()函数的输入参数需要是cropAndCenterImage(".photo-card-image-wrapper")中每个实例的类的名称。

这是我到目前为止所做的：

$(function() {
    $("div.photo-card-image-wrapper").each(function() {
        cropAndCenterImage("every instance of photo-card-image-wrapper class");
    });
});`

修改

        function cropAndCenterImage(el, size) {
            //el = img wrapper
            //img = img element
            if (size === undefined || size === null) {
                var portfolio = document.getElementById("portfolio").offsetWidth;
                console.log(portfolio);
                if (portfolio < 1200) {
                    size = portfolio / 4;
                } else if (portfolio < 960) {
                    size = portfolio / 3;
                } else {
                    size = portfolio / 5;
                }
            }
            var $el = $(el);
            var $img = $(el + " img");
            console.log($el);
            console.log($img);
            $img.width("auto").height("auto");
            var imgWidth = $img.width();
            var imgHeight = $img.height();
            console.log(imgHeight, imgWidth);

            //hopefully that returns the img to it's default height and width by making the inline style to empty quotes

            if( imgWidth > imgHeight ) {
                //Crop image
              //console.log("width greater than height");
                if ( imgHeight >= size  ) {
                    console.log("hit if");
                    $img.height(size);
                    imgHeight = $img.height();
                    imgWidth = $img.width();
                    $el.height(imgHeight).width(imgHeight);
                } else {
                    console.log("hit else");
                    $el.height(imgHeight).width(imgHeight);
                    $img.height(imgHeight).width(imgWidth);
                }

                //Center image horizontally
                var leftInt = (imgWidth - $el.width()) / 2;
                $img.css({ "margin-left": "-" + leftInt + "px", "margin-top": "0" });
            } else {
                //Crop image
                console.log("height greater than width");
                if ( imgWidth >= size  ) {
                    $img.width(size);
                    imgHeight = $img.height();
                    imgWidth = $img.width();
                    $el.height(imgWidth).width(imgWidth);
                } else {
                    $el.height(imgWidth).width(imgWidth);
                    $img.height(imgHeight).width(imgWidth);
                }
                imgHeight = $img.height();
                //Center image vertically
                var topInt = (imgHeight - $el.height()) / 2;
                //console.log(topInt);
                $img.css({ "margin-top": "-" + topInt + "px", "margin-left": "0"});
            }


        }

HTML

<div class="photo-card-image-wrapper"><a href="images/art1.jpg" class="gallery" data-lightbox="portfolio"><img src="images/art1.jpg" class="art" /></a></div>
<div class="photo-card-image-wrapper"><a href="images/art2.jpg" class="gallery" data-lightbox="portfolio"><img src="images/art2.jpg" class="art" /></a></div>
<div class="photo-card-image-wrapper"><a href="images/art3.jpg" class="gallery" data-lightbox="portfolio"><img src="images/art3.jpg" class="art" /></a></div>
<div class="photo-card-image-wrapper"><a href="images/art4.jpg" class="gallery" data-lightbox="portfolio"><img src="images/art4.jpg" class="art" /></a></div>
<div class="photo-card-image-wrapper"><a href="images/art5.jpg" class="gallery" data-lightbox="portfolio"><img src="images/art5.jpg" class="art" /></a></div>
                    etc

Answer 1

$(function() {
    $("div.photo-card-image-wrapper").each(function() {
        cropAndCenterImage($(this));
    });
});

如何遍历类的每个实例并在函数中使用它？

1 个答案: