javascript - 如果元素高度大于 x addClass "portrait"否则 addClass "landscape"

Question

我正在尝试编写这个脚本:

如果元素高度大于226，则addClass“portrait”，否则addClass“landscape”

我有这个:

var assetHeight = $("video.img-responsive").outerHeight();

if (assetHeight > 226){
    $("video.img-responsive").addClass('portrait');
}
else {
    $("video.img-responsive").addClass('landscape');
}

但是，当我检查我的元素时，尽管某些元素的高度大于 226，但所有元素都只添加了“landscape”类。

此外，当我将脚本翻转为:

var assetHeight = $("video.img-responsive").outerHeight();

if (assetHeight < 226){
    $("video.img-responsive").addClass('landscape');
}
else {
    $("video.img-responsive").addClass('portrait');
}

所有元素仍在添加类景观。

当我使用控制台检查选择器并找到每个单独元素的高度时，它会为我提供元素的正确高度。然而，高度并没有在 css 或 html 中指示。为元素指定默认高度 auto。

这是我的 html :

<div id="mTS_1" class="mTSWrapper mTS_horizontal">

<ul id="mTS_1_container" class="mTSContainer" 
style="position: relative; top: 0px; left: 0px; width: 815px;">

    <li class="mTSThumbContainer">
        <div class="asset-container">
            <video class="img-responsive landscape" type="video/mp4"        
            src="https://ternpro-development.s3.amazonaws.com/media/
            films/69/mobile/2.mp4" data-id="69"></video>
       </div>
       <span class="thumnail-video"></span>
   </li>

   <li class="mTSThumbContainer">
       <div class="asset-container">
           <video class="img-responsive landscape" type="video/mp4" 
           src="https://ternpro-development.s3.amazonaws.com
           /media/films/71/mobile/3.mp4" data-id="71"></video>
       </div>
       <span class="thumnail-video"></span>
   </li>

</ul>

</div>

控制台:

$("[data-id='72']").outerHeight();
224

$("[data-id='73']").outerHeight();
710

Answer 1

我认为您的问题是由于使用选择器拾取页面上的所有视频而引起的。相反，循环遍历它们并将逻辑应用于各个元素。

$("video.img-responsive").each(function(){
    var _self = $(this);

    if (_self.outerHeight() > 226){
        _self.addClass('portrait');
        _self.removeClass('landscape');
    } else {
        _self.addClass('landscape');
        _self.removeClass('portrait');
    }
}