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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

Q&A

解決済

1回答

4482閲覧

jQueryプラグイン Isotopeの使い方について

rokusan

総合スコア13

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

0グッド

0クリップ

投稿2016/05/19 10:22

編集2016/05/19 13:03

###前提・実現したいこと
こちらを参考に、Isotopeで要素のフィルタリングをしたいのですが、どうしてもうまくいきません。
ウィンドウ幅を拡縮したときの並び替えの動作はうまくいきましたが、フィルタリングがだめみたいです。

追記:フィルタリングがだめ、とは、切り替えのボタンを押しても動作しなかったということでした。
Lhankor_Mhyさん、ご指摘ありがとうございます。
エラーメッセージ(指しているものがあっているかさえ不安なのですが)は以下の内容でした。
index.html:59 Uncaught ReferenceError: $container is not defined
index.html:80 Uncaught SyntaxError: Unexpected token }

jqueryの知識が浅く、コピペしかできないため、困っております。何卒よろしくお願いします…

###該当のソースコード

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>FROM ME TO "?"</title> <link rel="stylesheet" type="text/css" href="css/portfolio.css"> <style type="text/css"> html,body{ margin: 0; } body{ font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS ゴシック", sans-serif; text-align: center; color: #6c5e66; } .side img{ margin: 50px 0 ; width:150px; } li{ list-style:none; margin-bottom:30px; color: white; } li a{ color: white; text-decoration: none; } .wrapper { overflow: hidden; } .main { float: right; width: 100%; margin: 0 0 0 -250px; } .side { float: left; width: 250px; height: 100vh; background-color: #f1c21c; text-align: center; } .content { margin: 100px 0 0 270px; } h1{ margin-top: 50px; } .title{ position: absolute; top: 100px; left: 15%; font-size: 30px; font-weight: bolder; } .item { width: 25%; } /*他と違う幅の要素を入れたい場合も、下記のように指定すればIsotopeが並べ変えてくれます*/ /*.item.w2 { width: 50%; }*/ .item img { width: 100% } /*なめらか表示*/ .isotope .item { -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -ms-transition-duration:0.2s; -o-transition-duration:0.2s; transition-duration:0.2s; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="js/isotope.pkgd.min.js"></script> </head> <body> <!-- main --> <div class="wrapper"> <div class="main"> <div class="content"> <!-- フィルタリングされる要素 --> <div class="isotope"> <div class="item filter-1"><img src="images/icon.png" alt="" /></div> <div class="item filter-2"><img src="images/icon.png" alt="" /></div> <div class="item filter-3"><img src="images/icon.png" alt="" /></div> </div> </div> </div> <!-- サイドバー --> <div class="side"> <img src="images/icon.png" alt="" /> <!-- フィルターきりかえボタン --> <div class="filter"> <ul> <li><a href="#" data-filter=".filter-1">FROM ME TO ...</a></li> <li><a href="#" data-filter=".filter-2">WEB</a></li> <li><a href="#" data-filter=".filter-3">ILLUSTRATION</a></li> <li><a href="#" data-filter=".filter-4">OTHER</a></li> <li><a href="#" data-filter="*" class="current">ALL</a></li> <li><a href="#">PROFILE</a></li> </ul> </div> </div> </div> <script> // Isotopeの初期化設定 $(function() { $('.isotope').isotope({ itemSelector: '.item', masonry: { columnWidth: 100 } }); }); </script> <script> // フィルタリング機能を有効に $container.isotope({ filter: '.selector' }); </script> <script> // フィルタリングさせる $('.filter a').click(function(){ $('.filter .current').removeClass('current'); $(this).addClass('current'); var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector, animationOptions: { duration: 750, easing: 'linear', queue: false } }); return false; }); }); </script> </body> </html>

追記:kei344さん、ご指摘ありがとうございます。見づらくなってしまい申し訳ありませんでした。

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

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

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

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

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

kei344

2016/05/19 10:25

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
Lhankor_Mhy

2016/05/19 10:32

『フィルタリングがだめみたい』とは具体的にはどんな感じにダメでしたか? エラーメッセージなどは出ましたか?
guest

回答1

0

ベストアンサー

多分ですが、

  • <script>を無意味に分けてしまっている
  • $containerが宣言されていない為undifindが返ってるんじゃないでしょうか?

まずは

  1. 「フィルタリング機能を有効に」のscript要素と内容を削除。※内容が重複しているのでいりません

  2. 「Isotopeの初期化設定」と書かれているscript要素の$(function() { });の中へ1以外のすべてのscript要素の記述内容をまとめる

  3. var $container = $('.isotope');を2の一番はじめに追加

してみてください。

投稿2016/05/19 10:47

編集2016/05/19 10:48
manabufukai

総合スコア700

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

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

rokusan

2016/05/19 13:36

おっしゃる通りの手順で無事動きました!! 一人じゃなにもわからなかったので本当に助かりました…! ありがとうございました!!
manabufukai

2016/05/19 14:03 編集

無事解決できたようで何よりです。 エラーメッセージをちゃんと確認されてらっしゃるので、あとはその意味を理解するだけでご自身でも解決できるようになりますよ! ・index.html:(Number) は「index.htmlの(Number行目で)」 ・ReferenceError は「存在しない変数が参照された場合のエラー」 ・SyntaxError は「構文エラー」 なので 『index.html:59 Uncaught ReferenceError: $container is not defined』 だと、 『index.htmlの59行目で存在しない変数が参照された場合のエラー (内訳):変数「$container」が未定義』 という意味ですね。 直訳でもほぼほぼそのままなので、分からないエラーならGoogle翻訳してみるだけでもだいたい分かったりします。 エラーメッセージを元に、これらのエラーが消えるまで修正を重ねていく、というところから始めてみると上達していくのも早いかなと思いますよ!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問