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

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

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

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

JavaScript

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

jQuery

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

Q&A

解決済

1回答

1007閲覧

Javascript(jQuery?)のonclickに関して

LBciel.

総合スコア18

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2020/07/05 13:55

教えて頂きたい事

親class内の子classをクリックした際に行う処理を別々にしたい。

boxaをcssでボタンにしており、クリックした際に中の数値を別の場所に足したり引いたりしたいと考えています。

例:「tab1」内 boxa クリックで 5(boxb), 10(boxc)を「EXP」内 box2, box3 に加算する。「tab2」の場合は減算。

html

1<div class="tab1"> 2 <div class="boxa">足し算</div> 3 <div class="boxb">5</div> 4 <div class="boxc">10</div> 5</div> 6 7<div class="tab2"> 8 <div class="boxa">引き算</div> 9 <div class="boxb">10</div> 10 <div class="boxe">5</div> 11</div> 12 13<div class="EXP"> 14 <div id="exp1" class="box1">0</div> 15 <div id="exp2" class="box2">0</div> 16 <div id="exp3" class="box3">0</div> 17 <div id="exp4" class="box4">0</div> 18 <div id="exp5" class="box5">0</div> 19</div>

javascript

1$(document).ready(function(){ 2 $(".boxa").on("click",function(){ 3 } 4}

問題点

現状のjavascriptコードの場合、両方のboxaで同じ処理になってしまう為、各々別に処理するためには親classを判定に入れる事が良いのではと考えました。指定方法がわからずこちらを利用させていただきました。

環境

windows10
VScode

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

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

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

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

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

yambejp

2020/07/05 14:18 編集

tab2の3番めのdiv要素のクラスがboxcではなくboxeなのは仕様ですか? EXP内、exp1、exp4、exp5は使用しないのでしょうか?
guest

回答1

0

ベストアンサー

currentTargetからparentでとってもいいですけど、それならそもそも「この親の子」という指定をされては。

js

1$(".tab1 .boxa").on("click",function(){

このセレクタの指定の仕方はCSSと基本的に同じです。

投稿2020/07/05 14:00

編集2020/07/05 14:02
m.ts10806

総合スコア80765

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

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

LBciel.

2020/07/05 14:08 編集

ご回答有難う御座います!書いていただいたコードで無事解決しました! 2,3個上の親でも飛ばせて指定出来たので非常に便利でした! currentTarget、parentも調べ、参考に致します。有難う御座いました!
m.ts10806

2020/07/05 14:07

ただ、親はIDのほうが良い気がしますし 「tab1」「tab2」と名付けている時点で、同ページ内に現れるようには見受けられません。
LBciel.

2020/07/05 14:11

なるほど。IDでも出来るのですね。学び始めたばかりでしたので勉強になります。本当に有難う御座います! 調べる際にはセレクタの指定という表現であれば調べやすいでしょうか。
m.ts10806

2020/07/05 14:17

私の >このセレクタの指定の仕方はCSSと基本的に同じです。 という回答は、CSSで要素の扱い方が分かっていれば、自然と分かる、という意味合いで書きました。 IDでも、というより「1ページに1つしかないことが保証される」のであればIDにすべき内容と思います 現に getElement"s"ByClassName() なので、クラスを指定する=複数存在することが前提(1個でも、リストで取得される)です。 >調べる際にはセレクタの指定という表現であれば調べやすいでしょうか。 「セレクタ」自体が公式の表現です。 https://api.jquery.com/category/selectors/ 覚えておいた方が、回答も理解しやすくなると思います。
LBciel.

2020/07/05 14:39

詳しく説明頂き有難う御座います!非常に勉強になります。 又、お忙しい中、お時間頂きまして有難う御座います。 >現に getElement"s"ByClassName() なので、 なるほど。IDは"s"ではなかったですね。初めに.getElementById()で取得していた際に、他の場所の同じid名を取得できずにidは使いづらいな…という認識で選択肢から外してしまっていました。 単数複数を意識することも忘れないようにしていきます! >覚えておいた方が、回答も理解しやすくなると思います。 おっしゃる通りです。説明・検索したくても表現がわからず困ることが多々ありました。少しずつ覚えていきたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問