1
00:00:00,380 --> 00:00:05,190
私が取り組もうとしている次の機能は、ここのXボタンです。

2
00:00:05,190 --> 00:00:11,730
したがって、このXをクリックすると、実際にはToを全体的に削除する必要があります。グレーではなく、実際にフェードアウトして削除する必要があります。

3
00:00:11,730 --> 00:00:14,060
 

4
00:00:14,190 --> 00:00:16,530
だから最終版ではこのように見えます。

5
00:00:16,710 --> 00:00:22,170
私たちは同じ色やアニメーションで同じアイコンをクリックする必要はありませんが、何かをクリックしたときの機能は同じでなければなりません。

6
00:00:22,170 --> 00:00:24,890
 

7
00:00:24,930 --> 00:00:28,100
だから私は料理で終わったと言いましょう。

8
00:00:28,440 --> 00:00:30,400
フェードアウトしてから消えます。

9
00:00:30,450 --> 00:00:33,010
それはもはや完全になくなっています。

10
00:00:33,320 --> 00:00:34,250
OK。

11
00:00:34,590 --> 00:00:39,350
私たちが最初にやりたいことは、これらのexeのいずれかをクリックすることです。

12
00:00:39,660 --> 00:00:45,460
そして私たちの年齢のティムでは、私たちがそれぞれのことを簡単にできるようにしたことを覚えています。

13
00:00:45,690 --> 00:00:51,780
それ以外の場合は、嘘の一部としてXがあった場合、クリックがX上にあるかどうかを判断する方法はありません。

14
00:00:51,780 --> 00:00:54,140
 

15
00:00:54,150 --> 00:01:00,680
だから私たちはちょうどそこにいました、そして、今、私たちはjavascriptに行き、別のコメントを追加しましょう。

16
00:01:00,960 --> 00:01:08,330
削除するには、Xをクリックしてください。クリックイベントから開始します。

17
00:01:08,760 --> 00:01:10,740
だからドル記号。

18
00:01:10,770 --> 00:01:20,880
 

19
00:01:20,940 --> 00:01:34,110
すべてのスパンを選択して、もう一度クリックしてコールバック関数が必要になります。コールバックの代わりに、ちょうどそのようなスパンをもう一度クリックすれば、何も起こりません。

20
00:01:34,110 --> 00:01:35,200
 

21
00:01:35,340 --> 00:01:39,840
スパンをクリックするとすぐに、このスパンをクリックしたというアラートが表示されます。

22
00:01:39,840 --> 00:01:45,420
 

23
00:01:45,420 --> 00:01:52,690
スパンをクリックしてからXをクリックすると気付かないかもしれない小さな問題が1つありますが、私は警告を受け取ることを期待していますが、注意を払うにつれて細心の注意を払っています。

24
00:01:53,190 --> 00:01:57,380
また、クリックイベントから発生するスタイルも取得します。

25
00:01:57,840 --> 00:02:04,680
それは、スパムイベントが発生しており、その後、クリックイベントが発生しているということです。

26
00:02:04,680 --> 00:02:05,500
 

27
00:02:05,730 --> 00:02:11,480
私たちのスパンは味方の中にあるので、それは理にかなっています。

28
00:02:11,730 --> 00:02:17,130
だから私がスパンをクリックしたときに私はこのスパンをクリックしたときにそれを検査しましょう、私はこのスパンをクリックしていますが、それもスペインの同盟国です。

29
00:02:21,990 --> 00:02:25,680
 

30
00:02:25,830 --> 00:02:29,370
だから別の視点から私は嘘をつけています。

31
00:02:29,620 --> 00:02:36,660
しかし、私は井戸をクリックしている別の観点からは、これらのすべてがULの代わりに、またはdiv

32
00:02:36,660 --> 00:02:46,320
IDのコンテナ上にあるか、ボディ上にあるか、このスパンをクリックしているチーム要素上にあるので、5つまたは6つの異なる層。

33
00:02:46,350 --> 00:02:48,640
 

34
00:02:48,660 --> 00:02:53,880
イベントリスナーをスパンや味方に追加するとき、またはイベントリスナーがあれば、今すぐお見せしましょう。

35
00:02:53,880 --> 00:02:55,790
 

36
00:02:55,920 --> 00:03:04,020
ここで別のイベントリスナーを追加してみましょう。このイベントリスナーは意志の上に置かれ、UILをクリックすると警告が表示され、もう一度やります。

37
00:03:04,020 --> 00:03:07,990
 

38
00:03:08,280 --> 00:03:16,080
これはdivx

39
00:03:16,230 --> 00:03:19,560
IDコンテナに表示され、コンテナdivをクリックすると実際には本体でも同様に表示されます。

40
00:03:19,560 --> 00:03:22,510
そして、これはボディをクリックすると言います。

41
00:03:22,740 --> 00:03:23,410
OK。

42
00:03:23,430 --> 00:03:28,880
そこで、体の内側のコンテナの代わりにULの代わりに同盟者の代わりにあるスパンをクリックします。

43
00:03:28,890 --> 00:03:30,510
 

44
00:03:30,510 --> 00:03:34,530
さて、私たちが物事が発射される順番にリフレッシュするときに注意を払いましょう。

45
00:03:34,590 --> 00:03:42,570
最初にスパンをクリックするとスパンをクリックしたことがわかり、気づいたかどうかは分かりませんが、クリックイベントの火はうまくいきます。

46
00:03:42,600 --> 00:03:47,090
 

47
00:03:47,340 --> 00:03:53,060
その後、よくクリックした後、コンテナdivをクリックしてから、最後にボディをクリックします。

48
00:03:53,340 --> 00:03:56,980
この例では、イベントバブリングと呼ばれる現象を示しています。

49
00:03:57,030 --> 00:04:02,290
このイベントは最初にスパンでトリガされ、それが発生した場所です。

50
00:04:02,400 --> 00:04:05,130
しかし、それは2つの親要素で泡立ちます。

51
00:04:05,130 --> 00:04:11,490
 

52
00:04:11,490 --> 00:04:17,730
 

53
00:04:17,880 --> 00:04:20,830
だから、それはうその中に泡を浮かべて、それはどんなクリックイベントを引き起こします。そしてそこからそれは井戸に泡立つようになります。それはどんな良いクリックイベントを引き起こします。そしてHTL要素に当たるまで停止します嘘。

54
00:04:20,850 --> 00:04:25,840
Y内にあるスパンをクリックすると、クリックハンドラがトリガされます。

55
00:04:25,860 --> 00:04:31,250
私たちができることは実際にスパンの中の出来事にもはやバブルにならないよう伝えます。

56
00:04:31,440 --> 00:04:36,920
そのトラックで停止し、親要素で他のイベントをトリガーしないでください。

57
00:04:37,050 --> 00:04:38,600
だから私はここにそれを見せます。

58
00:04:38,960 --> 00:04:44,220
イベントオブジェクトに追加するこのスパンクイックリスナーの代わりに、すべて行う必要があります。

59
00:04:44,220 --> 00:04:48,210
そして、これはEイベントTとも呼ばれます。

60
00:04:48,420 --> 00:04:51,720
最も一般的な名前は、イベントまたはeです。

61
00:04:51,900 --> 00:04:59,110
次に、イベントストップ伝播と呼ばれるメソッドを追加します。

62
00:04:59,790 --> 00:05:04,050
そして、これはイベントがバブリングするのを止めるJのコーディング方法です。

63
00:05:04,050 --> 00:05:09,960
したがって、それはスパンで発射されますが、そのようなリスナーや、私たちが持っているこれらのリスナーの上には続きません。

64
00:05:09,960 --> 00:05:10,940
 

65
00:05:11,310 --> 00:05:13,620
したがって、保存してリフレッシュすれば

66
00:05:14,090 --> 00:05:20,210
そして今、私はスパンをクリックします。私はスパンでクリックされた後、停止します。

67
00:05:20,250 --> 00:05:25,740
私たちが設定した他のリスナーは、リスナーが正しくセットアップされた別のリスナーをもう一人も獲得できません。

68
00:05:25,800 --> 00:05:26,970
 

69
00:05:27,060 --> 00:05:29,560
正しいコードを入力してみましょう。

70
00:05:29,940 --> 00:05:35,490
私たちがする必要があったのは、私たちがスパンをクリックしたときです。私がこれらのいずれかをクリックするとブラウザに戻るでしょう。

71
00:05:35,490 --> 00:05:36,170
 

72
00:05:36,330 --> 00:05:44,460
この嘘を削除して、それを含む嘘が更新されるようにします。

73
00:05:44,850 --> 00:05:52,140
私はこの嘘を取り除くために必要なこのスパンをクリックし、ドル記号を使用してスパンから始めることができます。もしこれを削除するかフェードアウトするだけであれば、削除から始めます。

74
00:05:52,140 --> 00:05:58,810
 

75
00:05:59,790 --> 00:06:01,780
そして私たちは元に戻る。

76
00:06:02,190 --> 00:06:05,220
それが起こるのはスパンがなくなることだけです。

77
00:06:05,220 --> 00:06:08,020
私たちは今、スパンを削除しています。

78
00:06:08,130 --> 00:06:14,000
私たちは囲み要素を取り除く必要があり、Shakeriはそれを行うための本当に素敵で簡単な方法を提供します。

79
00:06:14,040 --> 00:06:22,680
私たちがしなければならないことは、この親を削除して、それが実際に私たちに親要素をクエリ要素として与えることだけです。

80
00:06:22,680 --> 00:06:24,120
 

81
00:06:24,120 --> 00:06:32,940
だから、これは私たちが親をクリックしたスパンであり、私たちは嘘をつけて、味方全体を取り除くことができます。

82
00:06:33,120 --> 00:06:39,500
だから今私はあなたがそれが消えて、再びリフレッシュするのを見ることができますリフレッシュする場合。

83
00:06:39,500 --> 00:06:46,110
しかし、私がフライをクリックすると、すぐに取り除くのではなく、最後にできる改善を確認するだけです。

84
00:06:46,110 --> 00:06:47,500
 

85
00:06:47,750 --> 00:06:48,770
それは退屈だ。

86
00:06:49,140 --> 00:06:59,510
だから、私たちはドットを消してそこから始め、リフレッシュしてからクリックして消えていく。

87
00:07:00,090 --> 00:07:03,530
しかし、ちょうどそれをフィッティングすることは実際にそれを削除しないことを忘れないでください

88
00:07:03,570 --> 00:07:09,570
それはまだここにあるのですが、私たちがあなたの代わりに検査しても、まだ3つあるのですが、そのうち2つだけにはディスプレイがありません。

89
00:07:09,720 --> 00:07:10,810
 

90
00:07:11,130 --> 00:07:12,660
そして、私たちはそれが起こることを望んでいません。

91
00:07:12,660 --> 00:07:15,470
私たちが削除した数千を失ったと想像してください。

92
00:07:15,720 --> 00:07:20,240
さて、私たちはページ上に隠された数千の要素を持つことによって処理速度を落としたくありません。

93
00:07:20,250 --> 00:07:26,820
ですから、私たちが代わりに使うのはuse removeですが、これを行うだけでは機能しません。

94
00:07:26,820 --> 00:07:30,770
それは削除されますが、フェードアウトが終了するのを待つことはありません。

95
00:07:30,900 --> 00:07:40,820
私たちがすばやくそれをクリックして消滅し始めたら、消す直後にフェードアウトをしたい場合は、後で実行されるフェードアウトに渡すことができるコールバックを利用するだけです。

96
00:07:41,620 --> 00:07:49,170
 

97
00:07:49,500 --> 00:07:51,580
 

98
00:07:51,690 --> 00:07:56,820
また、開始するには500ミリ秒と言いましょう。

99
00:07:57,180 --> 00:08:00,680
そして、それが終わったら私たちは単独でremoveを呼び出すことはできません。

100
00:08:00,720 --> 00:08:06,360
それを要素で呼び出す必要があり、それを呼び出す要素は、記入している要素と同じで、ドル記号を使用できます。

101
00:08:06,360 --> 00:08:09,320
 

102
00:08:09,420 --> 00:08:18,940
これはここの右のドル記号と同じものではないことに注意することが重要です。

103
00:08:19,470 --> 00:08:24,330
それで、スペインドル記号をクリックすると、ちょっと複雑になっていくのを見てみましょう。

104
00:08:24,330 --> 00:08:30,410
これはスパンで素早かった要素を指しますが、次に親をしています。

105
00:08:30,600 --> 00:08:37,720
だから今私たちはそのスパンを囲むうそをつくっているし、その場でフェードアウトをしています。

106
00:08:37,800 --> 00:08:43,080
だから、フェードアウトする代わりに、これはスパンではなく嘘です。

107
00:08:43,590 --> 00:08:47,470
はい、保存してリフレッシュに戻します。

108
00:08:47,730 --> 00:08:54,700
今は素敵なフェードアウトになります。ULを調べると、1つの人生が残っています。

109
00:08:55,110 --> 00:08:57,600
だから、それは消えてから消えます。

110
00:08:57,810 --> 00:08:59,610
ここにすべてを要約する。

111
00:08:59,610 --> 00:09:05,250
我々が遭遇した最初の問題は、スパンのクリックイベントが実際にそれを実行した後も、実際にそのイベントを発射していたことです。

112
00:09:05,250 --> 00:09:09,610
 

113
00:09:10,110 --> 00:09:15,090
だから、それを止める伝播を止めるイベントを使って、他の要素までバブリングすることを修正しました。

114
00:09:15,780 --> 00:09:22,530
そして、その親を使用して、クリックされたスパンを囲んでいる味方を検索してから、それを退屈させました。

115
00:09:22,530 --> 00:09:23,750
 

116
00:09:23,940 --> 00:09:29,430
そして、フェードアウトが完了したら、次のビデオで嘘をすべて取り除き、新機能に取り組むつもりです

117
00:09:29,430 --> 00:09:30,970