使用。每个（）的函数，在不同类别的应用不同的CSS

Question

我有这样的height-full等等等等 .height-half我使用他们所有计算width属性和应用它们每个使用jquery。每个（）不同的类;

我可以正确计算的宽度，但问题是在上述类应用主题：

var masonryImgHeight = $("[class*='height-']"); 
masonryImgHeight.each(function (index,elem) { 
    console.log(2); 
    var elemWidth = $(this).width(); 
    console.log(elemWidth); 
    var heightFull  = elemWidth, 
     heightHalf  = Math.floor(0.5*elemWidth), 
     heightOneThird = Math.floor((1/3)*elemWidth), 
     heightOneFourth = Math.floor((1/4)*elemWidth), 
     heightOneFifth = Math.floor((1/5)*elemWidth), 
     heightTwoThird = Math.floor((2/3)*elemWidth), 
     heightThreeFourth = Math.floor((3/4)*elemWidth); 

     console.log(heightThreeFourth); 

    switch(masonryImgHeight){ 
     case(".height-full"): 
      $(this).css({ 
       'max-height' : heightFull 
      }); 
     break; 

     case(".height-half"): 
      $(this).css({ 
       'max-height' : heightHalf 
      }); 
     break; 
    } 
}); 

所以现在我该怎么办？

Answer 1

masonryImgHeight是一个jQuery对象，是元素的集合，而不是表示className的字符串。

如果你想在类名，你可以使用elem.className但返回所有的人，如果他们有一个以上的，或者你可以使用hasClass，看看他们是否有某一类

$("[class*='height-']").each(function (index,elem) { 

    var elemWidth = $(this).width(); 

    var heightFull  = elemWidth, 
     heightHalf  = Math.floor(0.5*elemWidth), 
     heightOneThird = Math.floor((1/3)*elemWidth), 
     heightOneFourth = Math.floor((1/4)*elemWidth), 
     heightOneFifth = Math.floor((1/5)*elemWidth), 
     heightTwoThird = Math.floor((2/3)*elemWidth), 
     heightThreeFourth = Math.floor((3/4)*elemWidth); 



    if ($(elem).hasClass("height-full")) { 

     $(elem).css({ 'max-height' : heightFull }); 

    } else if ($(elem).hasClass("height-half")) { 

     $(this).css({ 'max-height' : heightHalf }); 

    } 
});