質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

1095閲覧

JavaScriptのコードを綺麗に描きたい

innjera

総合スコア132

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/04/29 00:32

以下コード、問題なく動くのですが、重複していて綺麗にしたいです。
どうしたら良いか分からず、御指南の願いします。

javascript

1 $(window).scroll(function() { 2 var scroll = $(window).scrollTop(); 3 var winW = $(window).width(); 4 var devW = 991; 5 6 if (scroll > 1) { 7 $("#header").addClass("navbar-dark bg-dark"); 8 } else if (winW <= devW){ 9 $("#header").addClass("navbar-dark bg-dark"); 10 } else { 11 $("#header").removeClass("navbar-dark bg-dark"); 12 } 13 }); 14 15 16 $(window).on('load resize', function(){ 17 var winW = $(window).width(); 18 var devW = 991; 19 20 if (winW <= devW) { 21 $("#header").addClass("navbar-dark bg-dark"); 22 } else { 23 $("#header").removeClass("navbar-dark bg-dark"); 24 } 25 }); 26

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

レビューします。
これって「ちょっとスクロールした後に、画面リサイズ」したら変になりませんか?
結局やってることは同じ関数でOKですよね。

そこを修正すると同じ事のコピペになるので関数化して切り出しましょう。
また、固定値のものは外に切り出しても良いです。

というわけでリファクタリング案としてはこんな感じですね。
逆にいうとこのくらいしか見るところがありません。

JavaScript

1$(function(){ 2 // devWは固定値なので外に出すと無駄がない 3 var devW = 991; 4 var refreshHeader = function(){ 5 // スクロール量と画面サイズは都度取るべきなのでこの位置がベスト 6 var scroll = $(window).scrollTop(); 7 var winW = $(window).width(); 8 9 if (scroll > 1) { 10 $("#header").addClass("navbar-dark bg-dark"); 11 } else if (winW <= devW){ 12 $("#header").addClass("navbar-dark bg-dark"); 13 } else { 14 $("#header").removeClass("navbar-dark bg-dark"); 15 } 16 } 17 $(window).scroll(refreshHeader); 18 $(window).on('load resize', refreshHeader); 19})

投稿2019/05/02 00:59

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

innjera

2019/05/02 01:11

おぉ、アドバイス有難うございます! かなりスッキリしました。めちゃ勉強になります
guest

0

ベストアンサー

現在のコードでもとくに汚いとは思いませんが、別の書き方が見たい、ということでしょうか。

js

1$( function() { 2 var $w = $( window ), $h = $( '#header' ); 3 function switch_header_class( flag ) { 4 $h[ ( flag ? 'add' : 'remove' ) + 'Class' ]( 'navbar-dark bg-dark' ); 5 } 6 $w.scroll( function() { 7 var scroll = $w.scrollTop(); 8 var winW = $w.width(); 9 var devW = 991; 10 switch_header_class( scroll > 1 || winW <= devW ); 11 } ).on( 'load resize', function() { 12 var winW = $w.width(); 13 var devW = 991; 14 switch_header_class( winW <= devW ); 15 } ); 16} ); // 未テスト

投稿2019/04/29 08:24

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

おなじクラスadd、removeするなら変数にしては

scroll

addをelseで分岐するのではなくおなじifでorにしては

headerのみ対象ならadd、removeをフラグで渡して分岐させる関数作られては。

投稿2019/04/29 00:39

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問