javascript - 在调整窗口大小时更改 html 标签结构

Question

我想在调整浏览器窗口大小时将一个 html 标签结构重建为一个新结构。有谁知道我怎样才能从第一个结构到第二个结构。我需要这个用于响应式个人元素。也许使用 JavaScript 调整大小事件，我不知道...

<div class="wrapper">
    <div class="slide">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="slide">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

<div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Answer 1

您可以监听窗口上的 resize 事件，然后在窗口小于特定大小时重组您的 HTML。将元素从第一个结构移动到第二个不是大问题，但挑战在于再次还原它。您如何知道哪个 .item 属于哪个 .slide？

一种方法是在创建列表时在单独的 data- 属性中跟踪每个 .item 的父项:

function makeList() {
    var $slides = $('.slide'),
        $items = $();

    // For each slide set a data-attribute on all its child .item's 
    $slides.each(function(i) {
        var $item = $(this).children('.item');

        $item.attr('data-slide', i+1);
        $items = $items.add($item);
    });

    // Append all items directly to the wrapper
    $('.wrapper').html($items).attr('data-structure', 'list');
}

我为 .wrapper 设置了一个数据属性，所以我们知道它已经转换为列表。否则在每次调整大小时都会触发它，您只需要一次(直到它调整回您想要幻灯片的位置)。

当您再次需要幻灯片时，遍历所有 .item 并保留幻灯片编号列表。对于您遇到的每个新的 data-slide 编号，制作一张新幻灯片并将其添加到总列表中；

function makeSlides() {
    var $slides = $(),
        slideNumbers = [],
        $currentSlide = $();

    $('.item[data-slide]').each(function() {
        var $item = $(this),
            slideNumber = $item.attr('data-slide');

        // if the slide number wasn't in the array yet push the current slide into $slides and create a new one
        if(slideNumbers.indexOf(slideNumber) < 0) {
            $slides = $slides.add($currentSlide);
            $currentSlide = $('<div class="slide" />');

            slideNumbers.push(slideNumber);
        }
        $currentSlide.append($item);
    });

    // add the last currentSlide
    $slides = $slides.add($currentSlide);

    // place all slides in the wrapper
    $('.wrapper').html($slides).attr('data-structure', 'slides');
}

然后最后绑定(bind)调整大小事件并在需要时触发这些函数:

$(window).resize(function(e) {
    var currentStructure = $('.wrapper').attr('data-structure');

    if(window.innerWidth < 600) {
        if( currentStructure !== 'list') {
            makeList();
        }
    } else {
        if( currentStructure !== 'slides') {
            makeSlides();
        }
    }
});

jsFiddle 演示:http://jsfiddle.net/gktLnw31/3/

我确实认为这可能会更有效率，但这只是概念验证。希望它能给您一些见解。