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

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

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

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

Q&A

解決済

2回答

268閲覧

jQueryで"〇〇のページを開いている場合"の書き方?

sleeeep12

総合スコア36

jQuery

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

0グッド

0クリップ

投稿2018/02/16 18:02

編集2018/02/16 18:03

〇〇のページを開いていた場合、の条件分岐をかきたいのですが、window.location.hrefを使うのってアリですか?
僕は例えば

var URL = window.location.href; var AAA = "http://AAA.com/BBB/"; if (URL == AAA) { 式 }

と書いてるのですが、window.location.hrefで動きはしたのですが、これはページ推移をするためのコードという認識なのでちょっと気持ちよくないです。

これとは別に、「このページにいる時」という条件を作るのに一番適した書き方はどのようなものがあるのか、ご意見、ご教授いただきたく質問しました。

どうぞ宜しくお願いします。

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

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

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

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

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

guest

回答2

0

これはページ推移をするためのコードという認識

その認識自体がおかしいです。location.hrefを読み取ってページ位置を取得する、という利用法に何も問題はありません。

投稿2018/02/16 22:31

maisumakun

総合スコア145121

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

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

sleeeep12

2018/03/02 07:16

はい、改めて調べたら私の認識が間違ってました。 大変失礼しましたm_ _m;;;
guest

0

ベストアンサー

こんにちは。

一番適した書き方

かどうかは分かりませんが、自分だったら

「これは ○○ページである」 ということを示す何らかの data 属性を定義する。

ことを考えます。
以下、説明のための具体例です。(何らかのECサイトのようなものを想定しています。)

  • たとえば、画面仕様の設計上、各ページを(110 とか 305だったりの)3桁の数字で

管理しており、その一番左の桁(百の位の数)の意味が以下であるとします。

1: 商品関連のページ 2: 注文関連のページ 3: 顧客関連のページ

 このとき、この3桁のページ番号を値として持つ data-page-number という属性を定義します

  • この属性を、どのページにもある (<head>ではなく <header>のほうの)ヘッダの、何らか

決まったセレクタで取れる要素の属性として追加します。

  • たとえば、どのページでも header > h1 でページタイトルを表示させるので、この h1

 data-page-number
をつけることにすると

HTML

1<header> 2 <h1 data-page-number='123'>商品詳細</h1> 3</header>

というような、 data-page-number 属性をもつ h1 が、どのページの <header>にも
あることになります。

  • すると

「このページにいる時」という条件

の分岐として、たとえば今挙げている例で、ページ番号の一番左の桁の数ごとに何らかの処理をしたいときは、

javascript

1var pageNumber = $('header > h1').data('page-number'); 2 3switch(pageNumber / 100) { 4 case 1: 5 // 商品関連のページの場合の処理をここに書く。 6 break; 7 case 2: 8 // 注文関連のページの場合の処理をここに書く。 9 break; 10 case 3: 11 // 顧客関連のページの場合の処理をここに書く。 12 break; 13} 14

と書けます。

 
上記のシナリオで、data-page-number という属性名と、3桁の数字というのは
例えばの話ですので、

  • data属性の名前
  • その値の型と定義 --- 文字列、数値:'123'、オブジェクト:'{ "type": "product", "category": 23 }'
  • HTMLのどの要素の属性にするか

は別途、対象のシステムに合わせて適切に検討しなければなりませんが、
JQuery の data() メソッドは、上記の例だと HTMLに書かれた
'123' を数値に変換してくれるように、属性の値からよしなに型変換
してくれるので、この用途には便利かなと思います。

以上参考になれば幸いです。

投稿2018/02/16 22:46

編集2018/03/02 13:15
jun68ykt

総合スコア9058

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

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

sleeeep12

2018/03/02 07:15

お返事遅れてしまい申し訳在りません。 私にとって大変参考になったご回答でした。 ありがとうございましたm_ _m
jun68ykt

2018/03/02 13:15

参考になったとのことで、よかったです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問