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

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

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

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

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

Q&A

解決済

1回答

3854閲覧

ページ遷移後にjQueryを実行したい

atsushi_m

総合スコア20

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

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

1グッド

1クリップ

投稿2019/03/10 14:26

編集2019/03/11 14:15

前提・実現したいこと

jQueryの「mixitup」というプラグインを使って、ギャラリーページをつくっております。このギャラリーページではmixitupのフィルター機能を使って、アイテムの出し分けを行います。

アイテムは「a」「b」「c」の3種類があり、掲載しているギャラリーページをAとします。
別ページのBにある「c」リンクをクリックすると、Aページに移動して「c」アイテムのみが表示されるところまでは実現できました。

ただ、私の理想では、
1.Aページに移動
2.一旦はすべてのアイテムが表示される
3.アニメーションでcアイテムのみが表示される。
(アニメーションはmixitupの機能です。)

という動作にしたく、そのためにはjQueryがページ遷移後に実行されればよいと考えましたが、下記コードでは移動するとすぐにcアイテムだけが表示されます。


試行錯誤したのですが、理解不足でどうにもうまくいかず相談させていただきます。
アドバイスいただけましたら幸いです。よろしくお願いいたします。

【追記】
アドバイスいただきました通り、当該HTMLを加えました。簡略化しておりますが、こういった具合です。また、記載したjQueryはHTMLの下部で読み込んでおります「mixitup_option.js」というファイルです。
引き続きどうぞよろしくお願いいたします。

【さらに追記】
Bページの「a」「b」「c」へのリンク部分のHTMLを記載しておりませんでしたので、改めて追記しました。

該当のソースコード

↓mixitup_option.js

jQuery

1$(window).on('load', function(){ 2 3 var containerEl = document.querySelector('#gallery'); 4 5 if(document.URL.match("#a")){ 6 // URLにaが含まれる時 7 $(function(){ 8 var mixer = mixitup(containerEl, { 9 load: { 10 filter: '.a' 11 } 12 }); 13 }); 14 15 } else if(document.URL.match("#b")) { 16 // URLにbが含まれる時 17 $(function(){ 18 var mixer = mixitup(containerEl, { 19 load: { 20 filter: '.b' 21 } 22 }); 23 }); 24 25 } else if(document.URL.match("#c")) { 26 // URLにcが含まれる時 27 $(function(){ 28 var mixer = mixitup(containerEl, { 29 load: { 30 filter: '.c' 31 } 32 }); 33 }); 34 } else { 35 $(function(){ 36 var mixer = mixitup(containerEl, { 37 "animation": { 38 "duration": 250, 39 "nudge": true, 40 "reverseOut": false, 41 "effects": "fade scale(0.5) translateZ(-100px)" 42 } 43 }); 44 }); 45 } 46 47});

↓AページHTML

HTML

1<html dir="ltr" lang="ja"> 2<head> 3<meta charset="UTF-8"> 4<title>無題ドキュメント</title> 5<link rel="stylesheet" href="../css/reset.css" type="text/css" /> 6<link rel="stylesheet" href="../css/style.css" type="text/css" /> 7</head> 8<body> 9 <div class="wrapper"> 10 <section id="category"> 11 <div id="gallery"> 12 <div class="mix a">a</div> 13 <div class="mix b">b</div> 14 <div class="mix c">c</div> 15 <div class="mix a">a</div> 16 <div class="mix b">b</div> 17 <div class="mix c">c</div> 18 </div> 19 </section> 20 </div> 21</body> 22<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 23<script src="../js/mixitup.js"></script> 24<script src="../js/mixitup_option.js"></script> 25</html>

↓Bページの「a」「b」「c」へのリンク部分

HTML

1<nav> 2 <ul class="menu"> 3 <li><a href="../A.html">A</a></li> 4 <ul> 5 <li><a href="../A.html#a">a</a></li> 6 <li><a href="../A.html#b">b</a></li> 7 <li><a href="../A.html#c">c</a></li> 8 </ul> 9 <li><a href="#">B</a></li> 10 <li><a href="#">C</a></li> 11 </ul> 12</nav>

補足情報(FW/ツールのバージョンなど)

利用しているjQueryのバージョンは1.10.2です。
また、プラグインmixitupのサイトはこちらです。
https://www.kunkalabs.com/mixitup/

【最終追記】

どなたかのお役に立つことがあるかもしれないので、修正後のjQueryを記載しておきます。

jQuery

1$(function(){ 2 3 $(window).on('load', function(){ 4 5 var containerEl = document.querySelector('#gallery'), 6 mixer = mixitup(containerEl); 7 8 if(document.URL.match("#a")){ 9 // URLにaが含まれる時 10 $(function(){ 11 mixer; 12 mixer.filter('.a'); 13 }); 14 15 } else if(document.URL.match("#b")) { 16 // URLにbが含まれる時 17 $(function(){ 18 mixer; 19 mixer.filter('.b'); 20 }); 21 22 } else if(document.URL.match("#c")) { 23 // URLにcが含まれる時 24 $(function(){ 25 mixer; 26 mixer.filter('.c'); 27 }); 28 29 } else { 30 $(function(){ 31 mixer; 32 }); 33 } 34 }); 35 36});
kei344👍を押しています

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

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

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

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

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

miyabi_takatsuk

2019/03/10 14:31

まず、記載いただいている、コードが、どのページのものなのでしょうか? また、A、B、Cページの該当する箇所でいいので、HTMLコードを記載いただいた方が、回答を得られやすいかと思います。
atsushi_m

2019/03/10 15:07

miyabi_takatsuk様、アドバイスいただきありがとうございます。ご指摘の通りHTMLを記載させていただきました。 現在、別の方にいただいたご回答を試行しておりますが、なにかお気付きのことがございましたら引き続きどうぞよろしくお願いいたします。
guest

回答1

0

ベストアンサー

$(function(){})$(window).on('load', function(){}) より前のタイミングのイベントで使われます。そのイベント以降であれば、他のイベントを待つことなく実行されます。

なので、とりあえず下記のようになります。ただ、少し待ってからfilterをかけるように待つほうが良いでしょう。

js

1$(function(){ 2 $(window).on('load', function(){/*ここで分岐*/}) 3})

【API Methods – MixItUp Docs | KunkaLabs】
https://www.kunkalabs.com/mixitup/docs/api-methods/#mixitup.Mixer.filter

【WindowOrWorkerGlobalScope.setTimeout() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout

投稿2019/03/10 14:37

kei344

総合スコア69364

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

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

atsushi_m

2019/03/10 15:04

kei344様、以前にもご回答いただいたことがございますね。この度も早々にご回答いただきありがとうございます。 勉強不足でいただいた回答を理解・試行するのに少し時間が必要なため、取り急ぎお礼と報告を申し上げます。また、進行しましたらこちらで連絡させていただきます。
atsushi_m

2019/03/10 16:27

夜分に失礼いたします。 おかげさまで解決できました!アドバイスいただいたとおりAPI(.filter)を利用してうまくいきました。(因みに.setTimeoutで待機時間をつくらなくても大丈夫でした。) 希望通りの動作になりホッとしました、本当にありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問