Question

我正在尝试编写此脚本：

如果元素高度大于226，则为addClass＆＃34; portrait＆＃34;，否则为addClass＆＃34; landscape＆＃34;

我有这个：

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

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

但是，当我检查我的元素时，所有这些元素都只有添加的类“景观”。即使某些元素的高度大于226。

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

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');
    }
}

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

1 个答案: