Question

假设我有一张桌子，我想在页面调整大小时将attr更改为true。我目前的代码是无效的。

<table data-toggle="table"
       data-pagination="true"
       data-search="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-card-view="false">
<thead>

$(document).ready(function() {
    $(window).resize(function() {
    if ($(window).width() < 990) {
        $('table').attr('data-card-view', 'true')
    } else {
        $('table').attr('data-card-view', 'false')
    }
    }
)})

Answer 1

我认为属性已正确更改，您是否已检入浏览器的devtools？

我认为即使属性已更改，您的表格卡片视图也无法更新！

那是因为bootstrap的自定义＆＃34;魔术属性＆＃34;导致HTML元素发生特殊事情的方法只会在页面加载时或当你明确要求bootstrap执行时解析。

事实上，已经有一种功能可以在卡片视图和普通视图之间切换：.bootstrapTable('toggleView')

if(($(window).width() < 990) != $('table').bootstrapTable('getOptions').cardView) { $('table').bootstrapTable('toggleView'); }

说明：if((condition x) != (condition y))是if((condition x && !condition y) || (!condition x && condition y))的简写。在我的示例中，它在第二个条件下没有任何问题，因为something < 990将评估为true或false，因此我可以直接将其与布尔成员cardView进行比较。

查看documentation。

Answer 2

这是Javascript（Vanilla）中可能的解决方案。检查是否没有其他'onresize'事件，或者可以覆盖此事件。

var table = document.getElementsByTagName('table')[0];
window.onresize = function() {
  if (window.innerWidth < 990)
    table.setAttribute('data-card-view', 'true');
  else
    table.setAttribute('data-card-view', 'false');
}

Answer 3

我认为＆＃39;语法错误。看看这个：

$(document).ready(function() {
    $(window).resize(function() {
        if ($(window).width() < 990) {
           $('table').attr('data-card-view', 'true');
        } else {
           $('table').attr('data-card-view', 'false');
        }
    });
});

您不能关闭.resize()和.ready()功能。

添加小提琴：https://jsfiddle.net/1kon3dfk/1/

更改屏幕上的attr值调整大小

3 个答案: