Question

我想根据窗口大小更改列表的类。

这是我目前的div：

<div>
    <ul id="image-holder" class="list-inline acc-list">
        <li><img src="" /></li>
    </ul>
</div>

当屏幕调整为小尺寸（即手机/平板电脑）时，我希望将div更改为以下内容：

<div>
    <ul id="image-holder" class="imageslider">
        <li><img src="" /></li>
    </ul>
</div>

到目前为止，我尝试过以下JavaScript：

$(document).ready(function(){   

    var $window = $(window);

    // Function to handle changes to style classes based on window width
    function checkWidth() {
        if ($window.width() < 980) {
            $('#image-holder').removeClass('acc-list').removeClass('list-inline').addClass('bxslider');
        };

        if ($window.width() >= 980) {
            $('#image-holder').removeClass('bxslider').addClass('acc-list').addClass('list-inline');
        }
    }

    // Execute on load
    checkWidth();

    // Bind event listener
    $(window).resize(checkWidth);

    $('.imageslider').imageSlider({
        slideWidth: 188,
        slideHeight: 188,
        slideMargin: 0,
        auto: true
    });
});

如果窗口已经达到一定大小，则此方法有效，但在调整大小时，它不会在图像屏幕处于活动状态和非活动状态之间成功更改。

Chrome Inspector：

<ul id="image-holder" class="acc-list list-inline" style="-webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(100px, 0px, 0px);">
    <li style="width: 100px;">
        <img src="img/image1.png" alt="">
        <div class="acc-desc-container">
            <p class="desc">blablabla</p>
            <p class="price">blablalba</p>
        </div>
    </li>

Answer 1

从你的文档开始，它将会是这样的。现在：

之后

var $ window = $（window）;

添加：

var rslider;
function createSlider() {
    rslider = $('.bxslider').bxSlider({
    slideWidth: 188,
    slideHeight: 188,
    slideMargin: 0,
    auto: true
        });
};

然后将checkWidth()函数更改为：

function checkWidth() {
    if ($window.width() < 980) {
        $('#image-holder').addClass('bxslider');            
        if ($('#image-holder').hasClass('acc-list') && $('#image-holder').hasClass('list-inline') && $('#image-holder').hasClass('bxslider')) {
            createSlider();}
       $('#image-holder').removeClass('acc-list').removeClass('list-inline');
    };

    if ($window.width() >= 980) {
        if ($('#image-holder').hasClass('bxslider')) {
            rslider.destroySlider();}
        $('#image-holder').removeClass('bxslider').addClass('acc-list').addClass('list-inline');
   }
}

这将添加（一次），然后在屏幕移动时销毁（一次）滑块。它创建了一个全局rslider变量来存储滑块，我删除了.imageSlider，因为它与其余代码不匹配，因为你已经调用checkWidth()来创建滑块。

Here's a fiddle with bxslider 4.12

根据窗口大小更改div中的类（jQuery / JS）

1 个答案: