問題

7
jQueryAnimation

onイベントについて

jQueryAnimationの問題に挑戦しよう!

問題

onイベントについて

onイベントの意味はご存知でしょうか?onがなくても動くじゃんと思われていると思いますが、実はonはすごく便利なんです!今回はその例を見ていきましょう。

あらかじめエディタに書くコード

                    <p>どれかクリックしてみてください</p>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="result"></div>
¥HTML¥
                
                    .content{
  cursor: pointer;
  border: 2px solid black;
  display: inline-block;
  margin-right: 30px;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
¥CSS¥
                

期待する画面

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

まずforを使ってそれぞれのcontentに適切な処理を与えます。onはイベントハンドラにデータを渡すことができます。今回はnumはi+1ですよ、というデータを保存させています。そして今回の場合はclickedとして定義した関数に引数としてeを与え、e.data.numでnumのデータを取得し、resultのtextを作っています。このようにonはデータの保存のようなことが可能なのです。

さらにスキルアップしたい方は公式LINEから「jQueryAnimation」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET