javascript - jQuery 的动态宽度 = 高度

Question

我在互联网上搜索了几个小时，但没有找到我面临的这个小问题的解决方案:制作一个小脚本来保持相对于宽度的动态高度。

我可以使用函数来做到这一点，但这些函数仅限于类等，我有一个带有 $(this) 的动态表单，但我想使用类或数据为每个 div 单独加载函数。

我的 HTML 示例:

<section>
    <div>
        <figure data-image="height80">
            <img src="[MYIMG]" alt="Image" />
        </figure>
    </div>
</section>
<section>
    <div class="large">
        <figure data-image="height80">
            <img src="[MYIMG]" alt="Image" />
        </figure>
    </div>
</section>

我的JS(带数据):

height80();
$(window).resize(function() {
    height80();
});

function height80() {
  var photo80 = $('[data-image="height80"]');
  var photo80W = photo80.width() * 0.8;
    photo80.css({ 'height': photo80W, 'max-height': photo80W });
}

有了这个，我需要为每个不同的 div 大小创建一个函数，所以:有办法创建一个完整的功能优化函数来做到这一点吗？

PS:我尝试使用 $(this) 但它返回主体的宽度... =(

谢谢!

#FIDDLE HERE#

Answer 1

我认为你的问题是你访问this的范围。

尝试将您的 height80 函数更新为:

function height80() {
    $('[data-image="height80"]').each(function () {
        var width80 = $(this).width()*0.8;
        $(this).css({ 'height': width80, 'max-height': width80 });
    });
}

这是更新的 fiddle :

http://jsfiddle.net/Da9HT/