Q&A
スクロールして見え始めたら0から高速でカウントアップしていき、指定の数字になるというものを作ってます。
数字一つでは思ったような処理になったのですが、それをいくつに増やしてもjsのファイルをいじることなく処理できるようしたいです。
現状互いに干渉してしまいます。
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="css/reset.css"> 6 <link rel="stylesheet" href="css/stylesheet.css"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 8 <script src="main.js"></script> 9</head> 10<body> 11 <div class="upNumber1 upNumber">300000</div> 12 <div class="upNumber2 upNumber">1234</div> 13</body> 14</html>
css
1body{ 2 height: 2000px; 3 padding: 150px; 4 background-color: black; 5 background-size: cover; 6} 7.upNumber{ 8 margin-top: 1500px; 9 font-size: 100px; 10 color: white; 11 display: inline-block; 12 width: 600px; 13}
js
1$(function () { 2 let scrollMinus = 140; 3 let scrollPoint; 4 let upNumberInfo = []; 5 let upNumberLength = $(".upNumber").length; 6 let j = 1; 7 for (let i = 0; i < upNumberLength; i++){ 8 upNumberInfo[i] = []; 9 // 高さ 10 upNumberInfo[i][0] = $(".upNumber" + j).offset().top; 11 // 元の数字 12 upNumberInfo[i][1] = $(".upNumber" + j).html(); 13 // カウント1単位 14 upNumberInfo[i][2] = Math.round(upNumberInfo[i][1] / 300); 15 if (upNumberInfo[i][2] % 10 == 0) { 16 upNumberInfo[i][2]--; 17 }; 18 upNumberInfo[i][3] = 0; 19 // カウントした？ 20 upNumberInfo[i][4] = false; 21 // 0にする 22 $(".upNumber" + j).html(0); 23 j++; 24 } 25 $(window).scroll(function () { 26 console.log(upNumberInfo) 27 let scrollTop = $(this).scrollTop(); 28 let scrollBtm = scrollTop + $(this).height(); 29 scrollPoint = scrollBtm - scrollMinus; 30 for (let i = 0; i < upNumberLength; i++){ 31 if (scrollPoint > upNumberInfo[i][0] && !upNumberInfo[i][4]) { 32 console.log(i) 33 upNumberInfo[i][4] = true; 34 upNumberInfo[i][5] = setInterval(function () { 35 if (upNumberInfo[i][3] > upNumberInfo[i][1] - upNumberInfo[i][2]) { 36 $(".upNumber").html(upNumberInfo[i][1]); 37 clearInterval(upNumberInfo[i][5]); 38 return; 39 } 40 $(".upNumber").html(upNumberInfo[i][3]); 41 upNumberInfo[i][3] = upNumberInfo[i][3] + upNumberInfo[i][2]; 42 }, 5); 43 } 44 } 45 }) 46});
要するにupNumber一つ一つの数字に関する情報を配列に入れていって、処理しようとしています。
数字が今は2つですが、いくつに増やしてもこれでいけると思ったのですが、
おそらくupNumberInfo[i][5]のところでおかしくなっているのだと思います。
うまいやり方わかるかたいらっしゃいますか？
回答1件
0
ベストアンサー
書き換え方を提示します。（こういう場合eachで処理します）
js
1$( function () { 2 // 共通で使う変数 3 let scrollMinus = 140; 4 /* 略 */ 5 $( '.upNumber' ).each( function () { 6 // 当該'.upNumber'を変数においておく 7 const $_this = $( this ); 8 /* 略 */ 9 $( window ).scroll( function () { 10 // $_thisで当該'.upNumber'を書き換えたり。 11 /* 略 */ 12 } ); 13 } ); 14} );
投稿2020/02/14 17:15
総合スコア69458
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/14 17:28