質問: true; }); } }); ``` ### 補足情報(言語/FW/ツール等のバージョンなど) jQuery 3.0.0 HTML5
回答: flag(true||false)で、処理を分けたいのでしょうか? でしたら、jqueryオブジェクトは、まとめた方が良いかもですね 以下に例文示しますので、ご参考にしてみてください。 質問者さんのソースへのコメント ``` var Jsyllabary = true; /* ここだと、グローバル変数宣言なので、 オブジェクトの中にいれて、スコープを持たせた方が、安全性が高いと言えます */ $(function(){ /* $(function(){...}}は、DOM解析(HTMLそのもの読み込み)後に 実行したい処理を書く場所って感じです。利用する時は、どのタイミングで使いたいのか、 意識してみると良いです。 ※これは、jquery(instance)へバインドされるので、スコープも変わりますから、注意です。 たとえば、thisとかとか...(^^; */ if ( Jsyllabary === true ){ $('.list__abc').hide(); $('.abc').click(function(){ $('.list__abc').show(); $('.list__Jsyllabary').hide(); /* $('.list__abc') ↓ var $abcList = $('.list__abc'); イベントは複数回呼ばれるので、毎回jqueryセレクタでオブジェクトを 生成するよりは、一度、変数代入した方が良いです. */ Jsyllabary = false; }); } else { $('.Jsyllabary').click(function(){ $('.list__Jsyllabary').show(); $('.list__abc').hide(); Jsyllabary = true; }); } }); ``` 以下、参考に! ``` あいう ABC あ | A ``` まず、HTMLが編集できるようであれば、上記のようにすると良いと思います。 classでjqueryオブジェクトを生成する場合、そのclassを持っている要素(DOM)をすべて、 まとめてくれます。 それを利用していきましょう ※単一(まとまった要素の中でもそいつだけ)が欲しいって時の対処も合わせて書くので、参考にw 足したのは、それぞれの対象にclass[listItems, listTab]を一つ足しました。 ``` var JS_TAB_ACTION = { set : function(){ this.tabClass = 'listTab'; this.itemClass= 'listItems'; this.Jsyllabary = false; this.setup() }, setup : function(){ var _this = this; var $tabs = $('.' + this.tabClass); var $items = $('.' + this.itemClass); $tabs.on('click', function(e){ var $this = $(this); var index = $tabs.index(this); var $target = $items.eq(index); /*これで単一要素が取れるます。 $('.class').eq(index)でラップされた要素から、 indexにマッチするやつだけ、returnします。*/ $items.hide(); $target.show(); _this.Jsyllabary = (index === 1) ? true : false; }); } }; $(function(){ JS_TAB_ACTION.set(); }); ``` 上記で質問者さんの望む挙動ができると思います。 ただ、留意があります。 私の書いたソースでは、制限があり、 1つめにタブの表示順(タグの書かれている順番)と表示したいアイテムの順番がリンクしている必要があります。 個別にイベントを張って、処理を分ける必要があれば、申しつけてください。 頑張って書いてみますw やっていることは、至ってJavaScriptのMDNで推挙している方法で、 オブジェクトを作り、処理をその中へ入れて、呼び出し式で、実行するようにしている これが、上記の概念・抽象です。 具体的な説明をすると、 var JS_TAB_ACTIONで、オブジェクトを作成 set(){...},setup(){...}をその中に入れる...イメージはハッシュ(連想配列)が良いと思います。 画面loadが終わったら、set()を呼び出し、イベントを発付する こんなところです。 MDN:(サイト:https://developer.mozilla.org/ja/docs/Web/JavaScript) 分からなかったら、分かるまで、付き合いますから、どんどん聞いて下さいな(*・ω・*)