Question

但是加载调整大小功能中的相同代码无法正常工作。

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

$('div').wrapAll('<div class="cc" />');
$('.cc div').wrap('<div class="group" />');

var groupLength = $('.cc .group').length;
    var groups = $('.cc .group');
    if(groupLength == 2){
        groups.css('width','50%');
    } else if(groupLength == 3){
        groups.css('width','33.33%');
    } else {
        groups.css('width','10%');
    }
});

demo

你可能会说它在调整大小时有效。但显然它没有负载，为什么呢？那么，可能有一个很好的方法来处理这个问题？

Answer 1

这是因为默认情况下，小提琴程序会在window.load处理程序中添加脚本，因此在脚本执行时，window.load事件已经被触发，因此处理程序不会再次执行。

在左侧面板的第二个下拉列表中选择No Wrap

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

    $('div').wrapAll('<div class="cc" />');
    $('.cc div').wrap('<div class="group" />');

    var groupLength = $('.cc .group').length;
    var groups = $('.cc .group');
    if (groupLength == 2) {
        groups.css('width', '50%');
    } else if (groupLength == 3) {
        groups.css('width', '33.33%');
    } else {
        groups.css('width', '10%');
    }
});

演示：Fiddle

window.load事件不像document.ready处理程序那样工作，即使事件已经被触发，它也会调用处理程序方法。

Answer 2

您可以在页面加载时触发resize()，因为默认情况下jsFiddle已将您的代码包装在$(window).load(function() {...});内：

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

$('div').wrapAll('<div class="cc" />');
$('.cc div').wrap('<div class="group" />');

var groupLength = $('.cc .group').length;
    var groups = $('.cc .group');
    if(groupLength == 2){
        groups.css('width','50%');
    } else if(groupLength == 3){
        groups.css('width','33.33%');
    } else {
        groups.css('width','10%');
    }
}).resize(); // <-- Here

<强> Updated Fiddle

我无法在窗口加载大小调整功能中动态添加内容

2 个答案: