Question

目标：动态更改每个分割元素的高度，使相邻列中的相对元素水平对齐 - 如UL LI LI，但没有实际列表。

如果窗口超宽，每个项目可能只有1行;但随着窗口收缩，每个项目可能有一个唯一的行数; e.g。

Exception Value: not enough values to unpack (expected 2, got 0)

我想要的结果是通过

将所有项目调整为3行高

{% if not field|is_checkbox and not field|is_checkboxselectmultiple %}
  {% crispy_field field %}
{% endif %}

但是，这个window.resize事件没有被触发？

为什么？

HTML：

item 1      item 2
  1 line      2 lines

item 3       item 4
  3 lines      1 line

CSS：

$(window).on('resize', function() { ...});

JS：

<div class="parent">
    <div class="column extraPaddingOnRight">
<a href="links/headstone.pdf">Nancy at Arlington National Cemetery</a><p>
    </div>
</div>
<!-- other DIV links follow -->

Answer 1

您似乎在

行有一个简单的语法错误

height: $maxItemHeight + 'px';

删除对象定义中不允许的;，并且在加载页面时，错误应该在浏览器控制台中可见。

另外，使用resizer();或简称$(window).on('resize', resizer);

来调用缩放器功能

完整的工作示例，您可能需要更改jQuery脚本的路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function() {

    function resizer() {
        var $maxItemHeight = 0, $thisItemHeight;

        $('div.column a').each(function() {
            $thisItemHeight = $(this).height();
            if ($thisItemHeight > $maxItemHeight)
                $maxItemHeight = $thisItemHeight;
        });

        $('div.column a').each(function() {
            $(this).css( {
                height: $maxItemHeight + 'px'
            }); 
        });
    }

    $(window).on('resize', function() {

        alert('ok');   // not triggered?

        // resizer;
    });
});
    </script>
</head>
<body>
<div id="testid">foo</div>
<button id="btnTest">Click me</button>
</body>
</html>

Answer 2

这是我的问题......吃了太多愚蠢的药片......

$(document).ready(function() {

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

 /*
    $(window).on('resize', function() {   // does not work!
        resizer();
    });
 */

 /*
    $(window).on('resize', resizer);       // does not work either! 
 */

})

与我的HTML标记一起建议删除分号和非常非常愚蠢的错误......

所以...这是迄今为止的产品：

My Tribute to my Bride Nancy

使用jQuery，window.resize事件是不是被触发了？

2 个答案: