Jquery 响应按钮脚本和数据切换

我正在使用引导，我正在尝试用一个按钮打开一个日期选择器。但是，当屏幕超过992px时，我希望以弹出窗口的形式打开日期选择器，但如果屏幕大小低于992px，则在模式弹出窗口中打开日期选择器

<div class="open-button" data-toggle="modal" data-target="#datepickerModal">

使用上面的代码，无论浏览器最初打开的屏幕大小如何，都会使按钮行为“粘住”。如果我在大于992px的窗口中打开它，它将作为弹出窗口打开，但是如果我将窗口缩小到992px以下，模式打开将不起作用。如果我在992px下打开窗口，模式将起作用，但如果我扩展窗口大小，弹出窗口将不起作用

我认为解决方案可能是根据窗口宽度通过脚本切换类（这样按钮就不会共享函数），但不确定如何使用数据切换属性

---

感谢您在这方面的帮助。

如果需要捕获窗口大小调整，您可以在jquery中使用resize触发器：

$( window ).resize(function() {
   if($( window ).width() >= 992){
       $(".open-button").data("toggle","modal");
   }else{
       $(".open-button").data("toggle","nonmodal");
});

---

请检查模态和非模态是否设置良好，因为我无法确定您何时需要模态或非模态

谢谢。但我想我是这样想的：

    var boxW = $(window).innerWidth(); // FIND THE BROWSER WINDOW WIDTH
    if(boxW > 992){ 
        $('#arrive-button').removeAttr('data-toggle');
        $('#arrive-button').removeAttr('data-target');
        $('#depart-button').removeAttr('data-toggle');
        $('#depart-button').removeAttr('data-target');
        $('#arrive-button').addClass('open-button');
        $('#depart-button').addClass('open-button');
    } else { // MOBILE
        $('#arrive-button').attr('data-toggle', 'modal');
        $('#arrive-button').attr('data-target', '#datepickerModal');
        $('#depart-button').attr('data-toggle', 'modal');
        $('#depart-button').attr('data-target', '#datepickerModal');
        $('#arrive-button').removeClass('open-button');
        $('#depart-button').removeClass('open-button');
    }   

不知道是否做数据目标是过分的。不知道“数据切换”是一个属性。嗯