Question

//@*Displaying list of images and names-----------------------*@
@foreach (var item in Model) {
    <div class="avatar-container">
        <div class="img-thumbnail">
            <img class="avatar img-thumbnail" src="@Href("~/Content/Avatars/",item.Name+".jpg")" />
        </div>  
        @Html.DisplayFor(modelItem => item.Name)  
    </div>
}   
//@*JavaScript------------------------------------------------*@  
<script>
    for (var i = 0; i < $(".avatar").length - 1; i++) {
        if ($(".avatar")[i].naturalWidth > $(".avatar")[i].naturalHeight) {
            $(".avatar").eq(i).addClass("landscape");
        }
    }
</script>
//@*CSS-------------------------------------------------------*@
div.avatar-container {
    display: inline-block;
    position: relative;
    width: 70px;
    height:70px;
    overflow: hidden;
}
div.img-thumbnail{
    width:100% !important;
    height:100%;
    background-color:#e1dada;
}
.img-thumbnail{
    padding:1px !important;
}
.avatar {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.landscape{
    width:100%;
    height:auto;
}

结果如下：image
所以我想要显示不同大小的头像看起来有点不错。如果图像的宽度<=高度，那么我将其显示为我的初始CSS，否则将其显示为“横向”。问题是前四个图像看起来很棒，但我无法弄清楚为什么最后两个图像没有拾取那个横向类（最后两个图像的大小相同：3104x1746像素）。它可能是JavaScript的错误吗？

Answer 1

i < $(".avatar").length - 1错误，因为您省略了数组中的最后一项。数组索引从0到length - 1，因为您执行i < length - 1循环从0执行到2（长度为4所以{{1} }）省略索引3处的最后一个元素。

您可以使用

i < 4-1

使代码正常工作

$(".avatar").each(function () {
    if (this.naturalWidth > this.naturalHeight) {
        $(this).addClass("landscape");
    }
})

JavaScript只遍历前四个元素

1 个答案: