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

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

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

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

jQuery

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

Q&A

解決済

1回答

154閲覧

JavaScriptの関数で、this がまだないときはどうしたらいいでしょうか

ninjanin

総合スコア26

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2018/11/12 01:21

編集2018/11/12 01:37

お世話になります。

.closeをクリックしたときに、その先祖の.areaidの最後の数字を取得し、それと同じ数字の#messageを非表示にしようと考えています。

たとえば#area2にある.closeをクリックしたら、#message2が非表示になるという感じです。

html

1<section> 2 <div id="area1" class="area"> 3 <span class="close">close</span> 4 </div> 5 <div id="area2" class="area"> 6 <span class="close">close</span> 7 </div> 8</section> 9 10<p id="message1">message1</p> 11<p id="message2">message2</p>

そこで次のようなコードを考えたのですが、function Close()var numを定義しようとしてもこの時点では$(this)がないために、先祖の.areaidを拾うことができません。

javascript

1function Close(){ 2 var num = $(this).closest('.area').attr('id').slice(-1); 3 $('#message'+num).fadeout(); 4} 5 6$('.close').on('click', function(){ 7 Close(); 8}); 9

このような場合、JavaScriptはどのように書けばいいでしょうか?

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

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

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

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

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

guest

回答1

0

ベストアンサー

例えばこんな感じではいかがでしょう。

JavaScript

1function Close(number){ 2 var num = number; 3 $('#message'+num).fadeOut(); 4} 5 6$('.close').on('click', function(){ 7 Close($(this).closest('.area').attr('class').slice(-1)); 8});

それはさておきclassからslice(-1)しても取れるのはareaのaなのでは…。
(本当はid(area2)から2をsliceしたいのだと予想)

追記
上のコードでは訂正してありますが、元コードではfadeoutと「O」が小文字になってしまってますね。
(正しくはfadeOut)

投稿2018/11/12 01:32

編集2018/11/12 01:42
madoka9393

総合スコア992

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

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

ninjanin

2018/11/12 01:38 編集

そうでした、idでした。修正しておきます。 失礼ですが、そちらはどのような仕組みになっているのですか?? ➀function Closeのかっこの中に(number)が入っている意味 ②var num = number;となっている意味 ➂クリック時のClose()で上手くいく理由 について(って全部ですけど笑)教えていただけませんでしょうか…。
madoka9393

2018/11/12 01:41

①Closeメソッドに引数を定義している ②定義した引数を「var num」に代入している ③Closeメソッドに引数として「$(this).closest('.area').attr('class').slice(-1)」を渡している …という書き方で伝わりますかね?
ninjanin

2018/11/12 01:44 編集

…勉強しておきます。笑 fadeOutもありがとうございます。
madoka9393

2018/11/12 01:48

なんとなく メソッドに値を渡すには「メソッド名(引数)」で渡す (今回の例ではClose($(this).closest('.area').attr('class').slice(-1))の部分) メソッド側が渡された引数を受け取るにはメソッドに引数を定義してあげる (今回の例ではClose(number)の部分) とでも思っていただければ。 ちゃんとしたものについてはここら辺でどうぞ。 https://www.ajaxtower.jp/js/function/index3.html https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions
ninjanin

2018/11/12 02:39

すみません、このようなケースだとどうなりますでしょうか? https://jsfiddle.net/6gL1e0pq/ function Close(){} で閉じたいものと、 on('click', function(){} で閉じたいものがあるのですが、 しかし後者では「num」が定義されていないようなのです…。
madoka9393

2018/11/12 02:54 編集

>しかし後者では「num」が定義されていないようなのです…。 そりゃあ、「on('click', function(){}」には「num」は定義されていませんから…。 「function Close(){}」で「num」が使えるのは「var num」で定義しているからです。 「on('click', function(){}」で「num」を使用したければ、 「on('click', function(){}」内に同じように「num」を定義してあげる必要があります。 $('.close').on('click', function(){  var num = $(this).closest('.area').attr('data-type');  $('#saru_'+num).fadeOut();  以下略 単純に先のコードを動かすだけなら 「$('#saru_'+$(this).closest('.area').attr('data-type')).fadeOut();」 のように書き換えれば動きますが。 定義した変数が「function Close(){}」内だけで有効なのは、変数のスコープの問題です。 JavaScript のスコープを理解する http://tacamy.hatenablog.com/entry/2012/12/30/191125
ninjanin

2018/11/12 03:41

ああ、なっるほど。何度もすみません。参考サイトまでありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問