Question

目前我有几个div调整大小函数，可以处理不同的页面宽度查询。这些工作正常，但我想在条件语句中为不同的窗口宽度包装所有这些函数。基本上我只希望函数调整div的大小＆＃34; Portfoliopod＆＃34;如果div不包含扩展的类pod。请参阅下面的代码和

的实例

http://mrliger.com/index2.php

您可以在实时示例中看到图像被剪裁，因为在展开图像之前，图像的高度是如何的

 if ($( '.portfoliopod' ).not( ".podexpanded" )) {




 $(window).resize(function() {
        if ($(window).width() >= 1025) {

var cw = $(".portfoliocontainer").width()/4;
$('.portfoliopod').height(cw);

        } 
    });

$(window).resize(function() {
        if ($(window).width() <= 1024) {

var cw = $(".portfoliocontainer").width()/3;
$('.portfoliopod').height(cw);

        } 
    });

$(window).resize(function() {
        if ($(window).width() <= 767) {

var cw = $(".portfoliocontainer").width()/2;
$('.portfoliopod').height(cw);

        } 
    });

$(window).resize(function() {
        if ($(window).width() <= 400) {

var cw = $(".portfoliocontainer").width();
$('.portfoliopod').height(cw);

        } 
    });

}

Answer 1

您可以使用此选择器：

$(".portfoliopod:not(.podexpanded)")

它将选择类portfoliopod的所有元素，但只选择那些没有类podexpanded的元素。

Answer 2

首先，您不需要多个resize处理程序。将它们包含在同一个中。

其次，使用:not()选择器

  $(window).resize(function() {
         if ($(window).width() >= 1025) {
             var cw = $(".portfoliocontainer").width() / 4;
             $('.portfoliopod:not(.podexpanded)').height(cw);
         }
         if ($(window).width() <= 1024) {
             var cw = $(".portfoliocontainer").width() / 3;
             $('.portfoliopod:not(.podexpanded)').height(cw);
         }
         if ($(window).width() <= 767) {
             var cw = $(".portfoliocontainer").width() / 2;
             $('.portfoliopod:not(.podexpanded)').height(cw);
         }
         if ($(window).width() <= 400) {
             var cw = $(".portfoliocontainer").width();
             $('.portfoliopod:not(.podexpanded)').height(cw);
         }
     });

如果div不包含此类，则执行以下

2 个答案: