Question

我觉得这应该是一个直截了当的答案，但我找不到它，所以如果我忽略了或者找不到任何先前的答案，我会道歉。

我想要完成的任务：更新元素相对于其流体宽度的高度。

我试图做的是抓取元素的宽度，将其乘以我想要的比例，以得出元素的正确高度。我将此传递给(window).load和(window).resize，以便在页面加载后计算高度，并且随着窗口和元素宽度的变化（元素宽度为100％），该元素的高度将重新计算。 / p>

这是我的代码：

var fn = ( function() {

    var player = $( '.rem_video_wrapper iframe[style]' ),
        w = player.css('width').slice(0,-2), // strip 'px'
        h = w * 0.6;

    player.css( 'height', h );

    // the following is for updating a <p> with current values
    // for troubleshooting purposes.
    var paragraph = $( '#var' );
    paragraph.text( w + ' (' + h + ')' );

});

$( window ).load( fn );
$( window ).resize( fn );

问题我遇到的问题是，当页面加载时，w似乎没有初始值，因此元素的高度未设置为应该的值。然而，当我调整页面大小时，它会启动并且元素开始正常运行。

如何在我的页面完全加载后让我的函数正确触发？我假设我的脚本在尝试运行之前甚至可以正确获取目标元素的宽度。

我尝试了$(document).ready(fn)，但这也无效。

我最近才把自己投入到jQuery中，所以我很可能会接受这样的可能性：我要么以完全错误的方式处理我的代码，要么我可能会问错误的问题。请赐教！

谢谢

修改

这是我的相关标记。

注意：此标记由Embedder（Craft CMS插件）和reEmbed生成，方法是使用我的Craft CMS模板文件中的以下行：{{ craft.embedder.embed (entry.youtube) }}其中youtube是包含所需YouTube播放列表网址的字段。

<div id="rem_playlist0" class="rem_playlist rem_inline_list rem_playlist_default" style="width: 459px; height: 399px;">

    <div class="rem_playlist_toolbar" style="display: block;">
        <span class="rem_playlist_title"></span>
        <span class="rem_playlist_actions">
            <span class="rem_playlist_skip_control previous disabled"></span>
            <span class="rem_playlist_info">
                <span class="rem_playlist_current">1</span>
                <span class="rem_playlist_divider">/</span>
                <span class="rem_playlist_total">27</span>
            </span>
            <span class="rem_playlist_skip_control next"></span>
            <a class="rem_toggle_inline_playlist" href="#">PLAYLIST</a>
        </span>
    </div>

    <div class="rem_video_wrapper">
        <iframe style="position: relative; width: 459px; height: 275.4px;" src="" allowfullscreen="" frameborder="0" data-rem-id="0"></iframe>
    </div>

    <ul class="rem_playlist_ul" style="margin-top: 25px; z-index: 10; display: none;">
        <li class="rem_playlist_list-item">"playlist item ..."</li>
        <li class="rem_playlist_list-item">"playlist item ..."</li>
        <li class="rem_playlist_list-item">"playlist item ..."</li>
    </ul>

</div>

Answer 1

您可以通过删除iframe的内嵌样式来解决此问题。这将允许您检索高度和宽度，并使用您创建的函数动态设置它们。

试试这个JSFiddle

JQuery的

// A function to rezise the height of <iframe> based on its width
function sizeIt() {
  var player = $('.rem_video_wrapper > iframe'),
  w = player.width(),
  h = w * 0.6;

  player.height(h);
}

//Remove inline styling and call sizeIt() for inital sizing
$(function (){
    $('.rem_video_wrapper > iframe').removeAttr('style');
    sizeIt();
});

//call sizeIt() on page resize
$(window).on('resize', function() {
  sizeIt();
});

在pageload之后检索并更新CSS值

1 个答案: