Javascript 如何使旋转木马具有响应性？

如何激活插件是响应转盘只有当大小小于1024px宽度。但如果超过1024px，则处于非活动状态。我使用的例子

$(window).bind("load resize", function() {
    var width = $(window).width();
    if (width <= 1024) {
        $("#product-item").addClass("owl-carousel").addClass("owl-theme");
    } else {
        $("#product-item").removeClass("owl-carousel").removeClass("owl-theme");
    }
});

将来

按钮

---

因为

class 1和class 2

是

owl项

和

owl阶段

，所以代码的问题似乎不是类的东西，而是生成代码的方式

下面的代码是由JSFIDLE生成的

window.onload=function(){
    $(document).ready(function() {
        $('.owl-carousel').owlCarousel({
            items: 1,
            margin: 10,
            autoHeight: true
        });
     })


    $(window).bind("load resize", function() {
        var width = $(window).width();
        console.log(width);
        if (width <= 1024) {
            $("#product-item").addClass("owl-carousel").addClass("owl-theme");
        } else {
            $("#product-item").removeClass("owl-carousel").removeClass("owl-theme");
        }
    });
}

按钮

@natasha你想删除dom还是只删除类？也许删除类是唯一的方法，我更新了答案。这是你想要的吗？如果不是，我真的无法理解你想要什么。似乎你认为“removeClass”不起作用。也许你可以试着打印一些日志，以确保方法被实际调用。

<button>Button</button>
<span class="3">
</span>

window.onload=function(){
    $(document).ready(function() {
        $('.owl-carousel').owlCarousel({
            items: 1,
            margin: 10,
            autoHeight: true
        });
     })


    $(window).bind("load resize", function() {
        var width = $(window).width();
        console.log(width);
        if (width <= 1024) {
            $("#product-item").addClass("owl-carousel").addClass("owl-theme");
        } else {
            $("#product-item").removeClass("owl-carousel").removeClass("owl-theme");
        }
    });
}