画面上のattr値を変更する

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

私は、あなたのブラウザのデベロッパーツールで確認した、属性はが正しく変更されていることを推測しますか？

属性が変更されたにもかかわらず、テーブルのカードビューがに更新されないという問題があります。！

これは、HTML要素で特別なことが起こるカスタムの「魔法の属性」は、ページの読み込み時や明示的にブートストラップに尋ねるときにのみ解析されるからです。

は、実際には、カードビューと通常のビューを切り替えることが既に関数がある：.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のいずれかと評価されるので、2番目の条件の周りに括弧を入れずに機能するので、ブール値のメンバーcardViewと直接比較できます。

documentationをチェックしてください。

Answer 2

私はそれが構文エラーだと思います。これをチェックしてください ：あなたは.resize()と.ready()機能を閉じないでください

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

。

はフィドルを追加します。ここではhttps://jsfiddle.net/1kon3dfk/1/

Answer 3

はJavascriptを（バニラ）で可能な解決策です。他の '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'); 
}