Question

我已经编写了一些jQuery，它在父母拥有img类的.four-three-img元素上动态设置4：3宽高比高度。它按预期工作，除非单个页面包含宽度不同的.four-three-img元素。

例如，如果有两个section包含.four-three-img img元素，则会确定第一个img中第一个section的高度并将其应用于第一个和第二个img元素中剩余的section个，可能更小或更大。我已经尝试将脚本放在for循环中，但它没有任何区别。

这是脚本：

$(window).on('load resize', function() {
  var fourThreeHeight = $('.four-three-img').width() * 0.75;

  $('.four-three-img img').each(function() {
    $(this).height(fourThreeHeight);
  });
});

演示：http://codepen.io/ourcore/pen/apWjmg

Answer 1

尝试将fourThreeHeight - 变量放在each - 函数中，并将$('.four-three-img')更改为$(this)：

$(window).on('load resize', function() {
  $('.four-three-img img').each(function() {
    var fourThreeHeight = $(this).width() * 0.75;
    $(this).height(fourThreeHeight);
  });
});

将它放在each - 函数之外将导致只存储第一个元素的宽度，而不是每个元素。

Live Codepen

动态元素高度不会单独影响所有实例

1 个答案: