如何調整響應表的JavaScript以在移動設備中選擇其他列

Question

這是我的CodePen：

https://codepen.io/matbathome77/pen/KeEzZG

var pos = $(this).index()+2;

它基於其他人的CodePen。 在移動版本中，如何將其默認設置為“ 1年”列，並在該列中顯示內容。

現在默認為3年，並且在您選擇該項目之前不會顯示該內容。

我嘗試將第4行的JS編輯為+1而不是+2，希望這會將默認值更改為1年。 沒用

Answer 1

在頁面加載和單擊上激活列。 將onclick內聯函數移動到其自己的名稱，然后在單擊它時對其進行調用（使用li樣式更新）。

從：

$( "ul" ).on( "click", "li", function() {
  var pos = $(this).index()+2;
  $("tr").find('td:not(:eq(0))').hide();
  $('td:nth-child('+pos+')').css('display','table-cell');
  $("tr").find('th:not(:eq(0))').hide();
  $('li').removeClass('active');
  $(this).addClass('active');
});

至

function loadColumn(pos) {
  $("tr").find('td:not(:eq(0))').hide();
  $('td:nth-child('+pos+')').css('display','table-cell');
  $("tr").find('th:not(:eq(0))').hide();
}

loadColumn(2);

$( "ul" ).on( "click", "li", function() {
  var pos = $(this).index() + 1;
  loadColumn(pos);
  $('li').removeClass('active');
  $(this).addClass('active');
});

是您要尋找的。

這是codepen： https ://codepen.io/anon/pen/KeEXzR

Answer 2

我想到了。 我必須創建一個li並將其隱藏。 我還必須告訴javascript調用第三列，而不是第二列。 謝謝大家

https://codepen.io/matbathome77/pen/KeEzZG

<li class="hidden">Name (ticker)<br>Bla bla bla category</li>

和CSS

li.hidden {display:none;}

最后，JavaScript

loadColumn(3);