目次
監視対象となる要素を増やすためにコードを変えていきます。
- 要素の設置
- コードの改変
要素の設置
・前回は監視を止める方法について見てきました。
・詳しくは『』を読んでみてください。
・今回は監視対象を複数にしていく方法について見ていきたいと思います。
・具体的には一定の箇所を超えたらふわっと現れる画像を複数個指定していく方法です。
・まずは要素の設置ということでHTMLの方に画像を増やしておきます。
・適当な箇所にimgタグを使って画像配置していきます。
・<img src=”img/img2.jpg” width=”200″ height=”200″>というように書いていきましょう。
・ついでにもう一つくらい追加しておきます。
コードの改変
・次はJavaScriptの方を変えていきます
・まずターゲットはquerySelectorAll(‘img’);とimgをすべて選択するようにします。
・このときターゲットはtargetsにしておくとわかりやすいと思います。
・次にオブザーバーの処理を複数回やっていくのでforEachを使ってあげましょう。
・targetsの処理をそれぞれのtargetにしてあげてターゲットの処理を開始していきます。
・このように書いていけばいいでしょう。
targets.forEach(target => {
observer.observe(target);
});
以上
