スマートな書き方を教えてください。

Question

前提・実現したいこと

まだまだ初心者なんですが、
何回も同じ記述をしなくてもいいようにコードを書きたい。

発生している問題・エラーメッセージ

今だとセクションが増えるごとに(セクション1、セクション2・・・)コードを記述しないといけないが、
これを、セクションが増えても記述しなくても大丈夫なようにしたい。
⇒ これは解決

別の問題が発生して解決できません

sectionに入るごとに、
number-1 number-2 number-3・・・
と付くようにはなりました。
やりたいことは、ここから、例えば、sectionの2つ目の時は、
number-2のみのclassが付与されるようにしたいです。
今だと、number-1 number-2の様に複数付いてしまいます。

このコードからどう変更すればいいでしょうか？

該当のソースコード

HTML

<section>
title
detail
</section>
<section>
title
detail
</section>
<section>
title
detail
</section>

javascript(jQuery)

$(window).on('scroll', function() {
add_class_in_scrolling( $('section') );
});

function add_class_in_scrolling( $target ) {
var winScroll = $(window).scrollTop();//スクロールの上下位置を取得
var winHeight = $(window).height();//ウィンドウの高さを取得
var scrollPos = winScroll + winHeight;//上記の合計（スクロールポジション）
$target.each(function(i){
if($(this).offset().top < scrollPos) {
$("body").addClass('number-' + (i+1)); // スクロールが対象エリアに入った場合
}
else {
$("body").removeClass('number-' + (i+1));// スクロールが対象エリアから出ている場合
}
});
}

ご教授お願いします。

Answer 1

今のところ、2と3だけが違うので、その部分だけ変数で受け取って文字列連結して処理するメソッド作ったら良いと思います。

こんな感じ（一部だけなのであとは自身で埋めてください。

function setScroll(num){

  let areaTop = jQuery(".target-area"+num).offset().top; // 対象エリアの上部の位置
}
//別で使うことないなら変数名は同じで問題ない認識。要件次第

Comments

[m.ts10806]

法則が今ひとつ見えてませんが、おなじクラスを振っておき「配下の（findとか使うと良い）」を指定するのも出来なくはないです。

[sucota]

こうでしょうか？
これでも上手くいかずでしたが・・。
もう少し教えていただけると幸いです。

HTML
```
<div class="section section1">
<div class="section-content target-area">セクション1</div>
</div>
<div class="section section2 target-area">
<div class="section-content">セクション2</div>
</div>
<div class="section section3 target-area">
<div class="section-content">セクション3</div>
</div>
<div class="section section4 target-area">
<div class="section-content">セクション4</div>
</div>
<div class="section section5 target-area">
<div class="section-content">セクション5</div>
</div>
```

javascript
```
jQuery(window).scroll(function() {

function setScroll(num){

let scrollTop = jQuery(window).scrollTop(); // スクロール上部の位置
let areaTop = jQuery(".target-area"+num).offset().top; // 対象エリアの上部の位置
let areaBottom = areaTop + jQuery(".target-area"+num).innerHeight(); // 対象エリアの下部の位置

if (scrollTop > areaTop && scrollTop < areaBottom) {
jQuery("body").addClass("is-in"+num); // スクロールが対象エリアに入った場合
} else {
jQuery("body").addClass("is-in"+num); // スクロールが対象エリアから出ている場合
}
};
});
```

[m.ts10806]

setScroll()がどこからも呼ばれてません。

[sucota]

こうでしょうか？
これでも上手くいかず、もう少しご教授いただけますでしょうか？

function setScroll(num){

let scrollTop = jQuery(window).scrollTop(); // スクロール上部の位置
let areaTop = jQuery(".target-area"+num).offset().top; // 対象エリアの上部の位置
let areaBottom = areaTop + jQuery(".target-area"+num).innerHeight(); // 対象エリアの下部の位置

if (scrollTop > areaTop && scrollTop < areaBottom) {
jQuery("body").addClass("is-in"+num); // スクロールが対象エリアに入った場合
} else {
jQuery("body").addClass("is-in"+num); // スクロールが対象エリアから出ている場合
}
};

[m.ts10806]

「上手くいかず」では何がどうなっているのやら分かりません。
コード全体を質問本文に提示いただけますか？

[sucota]

過去に似た質問があったので、それを参考にしつつコードを変更しました。
https://teratail.com/questions/254960

sectionに入るごとに、
number-1 number-2 number-3・・・
と付くようにはなりました。
やりたいことは、ここから、例えば、sectionの2つ目の時は、
number-2のみのclassが付与されるようにしたいです。
今だと、number-1 number-2の様に複数付いてしまいます。

このコードからどう変更すればいいでしょうか？

HTML
<section>
title
detail
</section>
<section>
title
detail
</section>
<section>
title
detail
</section>

javascript
$(window).on('scroll', function() {
add_class_in_scrolling( $('section') );
});

function add_class_in_scrolling( $target ) {
var winScroll = $(window).scrollTop();//スクロールの上下位置を取得
var winHeight = $(window).height();//ウィンドウの高さを取得
var scrollPos = winScroll + winHeight;//上記の合計（スクロールポジション）
$target.each(function(i){
if($(this).offset().top < scrollPos) {
$("body").addClass('number-' + (i+1)); // スクロールが対象エリアに入った場合
}
else {
$("body").removeClass('number-' + (i+1));// スクロールが対象エリアから出ている場合
}
});
}

[m.ts10806]

コード全体を質問本文に提示いただけますか？

[sucota]

質問本文を修正いたしました。