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：我试过用$（这个）但是它返回了身体的宽度... =（

谢谢！

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

这是一个更新的小提琴：

http://jsfiddle.net/Da9HT/

Answer 2

不不不...使用jQuery.call。这会将范围转移到其他功能。我正在使用我的Nexus atm，所以我无法给你一个链接。然后，在函数中你可以使用$（this），它将对这个函数调用的所有元素都是动态的。

动态宽度=使用jQuery的高度

2 个答案: