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

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

这是我目前的部门：

<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
    });
});

$（文档）.ready（函数（）{
变量$window=$（window）；
//函数根据窗口宽度处理样式类的更改
函数checkWidth（）{
如果（$window.width（）<980）{
$（'#image holder'）.removeClass（'acc-list'）.removeClass（'list-inline'）.addClass（'bxslider'）；
};
如果（$window.width（）>=980）{
$（“#图像持有者”）.removeClass（'bxslider'）.addClass（'acc-list'）.addClass（'list-inline'）；
}
}
//加载执行
检查宽度（）；
//绑定事件侦听器
$（窗口）。调整大小（选中宽度）；
$（'.imageslider'）.imageslider({
滑动宽度：188，
幻灯片编号：188，
幻灯片摘要：0，
自动：对
});
});

如果窗口已经达到某个大小，但在调整大小时，它无法在imageslider处于活动状态和非活动状态之间成功切换，则此操作有效

铬检验员：

<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>

宽度：100px；“>
blablabla
blalba

从您的文档开始，内容如下。准备就绪：

之后

变量$window=$（window）

加：

然后将

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');
   }
}

函数checkWidth（）{
如果（$window.width（）<980）{
$（'#image holder'）.addClass（'bxslider'）；
if（$（'#image holder'）.hasClass（'acc-list'）&&$（'#image holder'）.hasClass（'list-inline'）&&$（'#image holder'）.hasClass（'bxslider'））{
createSlider（）；}
$（“#图像保持器”）.removeClass（'acc-list'）.removeClass（'list-inline'）；
};
如果（$window.width（）>=980）{
if（$（'#image holder'）.hasClass（'bxslider'））{
rslider.destroySlider（）；}
$（“#图像持有者”）.removeClass（'bxslider'）.addClass（'acc-list'）.addClass（'list-inline'）；
}
}

这将在屏幕移动时添加（一次），然后销毁（一次）滑块。 它创建了一个全局rslider变量来存储滑块，我删除了

.imageSlider

，因为它与代码的其余部分不匹配，而且您已经调用

checkWidth（）

来创建滑块

---

这是因为imageSlider插件可能只在与选择器实际匹配的元素上运行，因此稍后添加类并不重要，每次调整大小时初始化插件似乎是个坏主意，因此您可能无法（或至少不应该）这样做。@adeneo我确实这么认为，似乎每次我都必须有效地重新加载页面，以重新检测是否使用

imageslider

标记。你认为实现这一目标的最佳方式是什么？我基本上希望我的图像在窗口较小时加载到imageslider中。我认为最好的方法是重写插件，使其按您的意愿工作，其他任何事情都可能会有问题，但我不知道imageslider插件是如何工作的，所以我可能错了。@adeneo我使用的插件是bxSlider（bxSlider.com）但我绝对没有JS专业知识来重写插件的行为不幸的是Hi@Mike这工作得很好，唯一的问题是当我将窗口放大到最大尺寸时，3个图像的布局混乱，因此3个图像都重叠，出于某种原因离开了页面，你知道吗？@germainelol-我不知道图像或页面上的css或html或其他代码的大小。当我把图像放在提琴上时，它们不会重叠或离开页面。所以我猜这与代码的其余部分有关。您可以尝试分叉小提琴并向其添加代码，直到它出现相同的错误，也许这会有所帮助？我不确定如何提供小提琴，因为我正在使用引导，而且我的文件当时非常大。我可以给你看代码，但我可以告诉你图像是188x188<代码>列表内联是一种引导功能，

acc列表

只有

float:left

inside@germainelol-所有这些都不会导致图像重叠或离开页面-我用这些更改更新了此处。所以它必须是代码中的其他东西。那时我肯定不知所措

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');
   }
}