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