0

Jqueryを利用して、一定値を超えた場合にクラスを変更する処理を行いたいと考えています。

やりたい事
1:画面を横720px以下に縮小場合に、指定CSSを設定
2:画面を横721px以上にした場合も指定CSSを設定

確認したい点
画面を縮小した場合はイベントが発火するのですが、拡大した場合にイベントが発火しない為、どなたかご教授いただければ幸いです。

```
<body>
  <div class="tabbody">
    <table>
      <thead>
        <tr>
          <th class="w-5" id="tr-no">No.</th>
          <th class="w-10">ステータス</th>
          <th class="w-25">テストコード</th>
          <th class="w-40" id="tr-agency-name">支店名</th>
          <th class="w-25" id="last-update">最終更新日時</th>
          <th class="w-10 tcenter" >チェック</th>
          <th class="" >照会</th>
          <th></th>
        </tr>
      </thead>
    <table>
  </div>


</body>

$(function() {
	var tabbody = $('.tabbody');

	tabbody.scrollLeft(function () {

	 if ($(window).scrollLeft(720) ) {
		      console.log("ここは呼び出しされる")
				$('#tr-no').removeClass('w5').addClass('w-7');
				$('#tr-agency-name').removeClass('w40').addClass('w38');
				$('#last-update').removeClass('w15').addClass('w15-7');

	 } else if ($(window).scrollLeft(721)) {
     console.log("ここが呼び出しされない")
		 $('#tr-no').removeClass('w7').addClass('w-5');
		 $('#tr-agency-name').removeClass('w38').addClass('w40');
		 $('#last-update').removeClass('w15-7').addClass('w15');
	 }
 });
});

4
  • 提示頂いたソースで試してみましたが、そもそも縮小も取れていません。scrollLeftはスクロールイベントを検知する関数ではなく、横スクロールの量を参照代入する関数です。scroll()の打ち間違いですか?
    – keitaro_so
    Commented 2018年2月5日 2:33
  • ご連絡ありがとうございます。scrollLeftの認識に誤りがありました。 要件を満たすやり方を再度考えてみます
    – bcbc7200
    Commented 2018年2月5日 2:50
  • 縮小、拡大は、'resize'イベントでは、$(function(){$(window).on('resize',function(){console.log($(window).width());});
    – yyz
    Commented 2018年2月5日 3:02
  • ご指摘の通り.resizeで対応できました ありがとうございました。
    – bcbc7200
    Commented 2018年2月6日 5:57

1 件の回答 1

-1

.scrollLeftではなく、.resizeメソッドで対応しました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。