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

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

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

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

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

jQuery

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

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

Q&A

解決済

3回答

1706閲覧

javascript(jQuery)関数から配列の参照

e3961

総合スコア7

JavaScript

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

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

jQuery

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

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

0グッド

0クリップ

投稿2016/10/12 01:50

編集2016/10/12 02:15

初心者です。初歩的な部分で詰まってます。お知恵をお貸し下さい。

jQueryでありがちなスライドメニューを作ってます。
ボタンを押すとコンテンツ表示/非表示という単純なもの。
これを実装したい箇所が複数ありまして、
最初は以下のように1つ1つ設定していました。

javascript

1$('#a_btn').click(function() { 2 if ($('#a_cont').css('display') === 'none') { 3 $('#a_cont').slideDown(); 4 } else { 5 $('#a_cont').slideUp(); 6 } 7}); 8$('#b_btn').click(function() { 9 if ($('#b_cont').css('display') === 'none') { 10 $('#b_cont').slideDown(); 11 } else { 12 $('#b_cont').slideUp(); 13 } 14}); 15

しかし、実装箇所があまりに多いため、
for文でまとめて設定しようと思いました。

javascript

1var list = []; 2list.push(['#a_btn','a_cont']); 3list.push(['#b_btn','b_cont']); 4/*----------------------------------------------*/ 5for (var i = 0; i < list.length; i++) { 6 $(list[i][0]).click(function() { 7 if ($(list[i][1]).css('display') === 'none') { 8 $(list[i][1]).slideDown(); 9 } else { 10 $(list[i][1]).slideUp(); 11 } 12 }); 13}

これでは関数の中身が動作しませんでした。

原因は予測できていまして。一応。
関数の list[i][0] は静的に設定してるからOKだけど、
関数の中身は動的なので list[i][1] を参照できない。

という事なんだと思います。

…しかし、原因は分かっていても、
list[i][1] を静的に設定しておく方法が分かりません。

ご教示いただければ幸いです。

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

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

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

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

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

guest

回答3

0

HTMLのソースが無いのでなんとも言えませんがこんな感じでどうでしょう?

javascript

1$(function(){ 2 $('input[type=button]').click(function() { 3 if(r=$(this).prop('id').match(/^(.+)_btn$/)){ 4 $('#'+r[1]+'_cont').slideToggle() 5 } 6 }); 7}); 8

HTML

1<input type="button" id="a_btn" value="A"><br> 2<div id="a_cont">a_cont</div> 3<input type="button" id="b_btn" value="B"><br> 4<div id="b_cont">b_cont</div> 5<input type="button" id="c_btn" value="C"><br> 6<div id="c_cont">c_cont</div>

投稿2016/10/12 02:12

yambejp

総合スコア114585

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

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

e3961

2016/10/12 03:13

ご回答ありがとうございました。 /^(.+) (`Д´;)こ、これは何だろうか… わからない事だらけです。ぐぐってみます。
yambejp

2016/10/12 03:37

/^(.+)_btn$/ は、いわゆる正規表現ってやつですね 「_btn」で終わる文字列にマッチし該当する部分をかっこで抜き出します a_btnはa、b_btnはbとなり、それが配列r[1]に収納されるので a_btnをクリックすればa_contを指定することができます
e3961

2016/10/12 05:01

ヒントとなるキーワード助かります。 「正規表現」でぐぐってみます。
guest

0

ベストアンサー

for でやるやり方よりスマートなやり方もあると思いますが、とりあえずいまある情報で解決するなら。

JavaScript

1var i, list = [ 'a', 'b' ]; 2for ( i = 0; i < list.length; i++ ) { 3 ( function( c ) { // 即時関数で処理 4 $( '#' + c + '_btn' ).click( function() { 5 if ( $( '.' + c + '_cont' ).css( 'display' ) === 'none' ) { 6 $( '#' + c + '_cont' ).slideDown(); 7 } else { 8 $( '#' + c + '_cont' ).slideUp(); 9 } 10 } ); 11 } )( list[ i ] ); 12}

追記:

こっちのほうが少し短い。

JavaScript

1var list = [ 'a', 'b' ]; 2list.forEach( function( c ) { 3 $( '#' + c + '_btn' ).click( function() { 4 if ( $( '.' + c + '_cont' ).css( 'display' ) === 'none' ) { 5 $( '#' + c + '_cont' ).slideDown(); 6 } else { 7 $( '#' + c + '_cont' ).slideUp(); 8 } 9 } ); 10} );

【Array.prototype.forEach() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

投稿2016/10/12 02:26

編集2016/10/12 02:30
kei344

総合スコア69366

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

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

kei344

2016/10/12 02:32

元の for の、var i でなく let i にするだけでもいけるような。( 'a_cont' は '#a_cont' にしないと動きませんが)
e3961

2016/10/12 03:09

参考にさせていただき、望む結果を得られました。 if ( $( '.' + c + '_cont' ).css( 'display' ) === 'none' ) { は if ( $( '#' + c + '_cont' ).css( 'display' ) === 'none' ) { にしました。 「とりあえずいまある情報で解決するなら」 的確なお気遣いありがとうございます。 ⌒┌○
e3961

2016/10/12 03:12

皆さんもありがとうございました。 ⌒┌○ 初めての質問で、お作法もわからず、 思いの他すぐにご回答を頂き、わたわたしてしまいましたが、 ひとまず、今のぼくレベルで理解できそうだった kei344さんの手法をとらせていただきました。 皆さんからもたくさんヒントを頂きました^^ 今後の学習に活かします。
guest

0

javascript

1$('#a_btn').click(function() { 2 if ($('#a_cont').css('display') === 'none') { 3 $('#a_cont').slideDown(); 4 } else { 5 $('#a_cont').slideUp(); 6 } 7}); 8$('#b_btn').click(function() { 9 if ($('#b_cont').css('display') === 'none') { 10 $('#b_cont').slideDown(); 11 } else { 12 $('#b_cont').slideUp(); 13 } 14});

javascript

1$('#a_btn,#b_btn').click(function() { 2 if ($(this).css('display') === 'none') { 3 $(this).slideDown(); 4 } else { 5 $(this).slideUp(); 6 } 7});

html

1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .accordion > ul > li > ul { 8 display: none; 9 } 10 </style> 11 </head> 12 <body> 13 <div class="accordion"> 14 <ul> 15 <li> 16 <a>ITEM</a> 17 <ul> 18 <li>q</li> 19 <li>w</li> 20 <li>e</li> 21 </ul> 22 </li> 23 <li> 24 <a>ITEM</a> 25 <ul> 26 <li>q</li> 27 <li>w</li> 28 <li>e</li> 29 </ul> 30 </li> 31 <li> 32 <a>ITEM</a> 33 <ul> 34 <li>q</li> 35 <li>w</li> 36 <li>e</li> 37 </ul> 38 </li> 39 </ul> 40 </div> 41 <script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script> 42 <script type="text/javascript"> 43 $(function () { 44 $('.accordion > ul > li > a').on('click', function () { 45 $(this).next('ul').toggle(); 46 }); 47 }); 48 </script> 49 </body> 50</html>

投稿2016/10/12 01:53

編集2016/10/12 02:31
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

e3961

2016/10/12 02:12

ご回答ありがとうございます。 あれ?と思いましたが、一応確認しました。 やはりボタンが消えただけでした… ボタンとコンテンツは別で、 ボタンを押すとコンテンツを表示/非表示させたいと思ってます。
退会済みユーザー

退会済みユーザー

2016/10/12 02:14

そもそも単独で動いているのですか?
yambejp

2016/10/12 02:16

命題の例示がおかしいので勘違いされていると思いますが thisの表示を切り替えるのではなく、btnをおしてcontの表示を替えているので 名前の置き換えが必要ですね
退会済みユーザー

退会済みユーザー

2016/10/12 02:18

> yambeさん おー、そういうことですね。 何れにしても、HTMLの提示がないと解凍できないですね。
e3961

2016/10/12 03:16

伝えきれず申し訳ないです。=人= yambejpさん、フォローありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問