jQuery　複数セレクタにadClassを行うことは出来ますか？

ナビゲーションの部分にclass名"current"を追加して、cssで装飾をつけたいと思っています。
メニュー6とメニュー7（cssでflexboxをかけて真横に並んでいるため、TOPからの高さは同じです。）この2つに同時にadclassをつけたいのですが、Jqueryの記述の仕方がどうにもわかりません。。
今の記述だと、メニュー6とメニュー7のどちらにもcurrentがつきません。

補足：一応メニュー1からメニュー5まではcurrentがつくので、そこは動いています。

Htmlの部分

Jqueryの部分

$(window).on('load resize',function(){
var pos01 = Math.round($("#storeinfo").offset().top - 250);
var pos02 = Math.round($("#fourmenu").offset().top - 250);
var pos03 = Math.round($("#takeout").offset().top - 250);
var pos04 = Math.round($("#inside-look").offset().top) - 250;
var pos05 = Math.round($("#sozai").offset().top - 250);
var pos06 = Math.round($("#intro").offset().top - 250);
var pos07 = Math.round($("#media").offset().top - 250);

$(window).on('load resize scroll',function(){
var posScroll = $(window).scrollTop();
if(pos01 <= posScroll && posScroll < pos02) {
$("#list01").addClass('current').siblings('li').removeClass('current');
} else if(pos02 <= posScroll && posScroll <= pos03) {
$("#list02").addClass('current').siblings('li').removeClass('current');
} else if(pos03 <= posScroll && posScroll <= pos04) {
$("#list03").addClass('current').siblings('li').removeClass('current');
} else if(pos04 <= posScroll && posScroll <= pos05) {
$("#list04").addClass('current').siblings('li').removeClass('current');
} else if(pos05 <= posScroll && posScroll <= pos06) {
$("#list05").addClass('current').siblings('li').removeClass('current');
} else if(pos06 <= posScroll) {
$('#list06#list07').addClass('current').siblings('li').removeClass('current');
} else if(pos07 < posScroll) {
$('#list06#list07').removeClass('current').siblings('li').removeClass('current');
}
});
});

行動規範の内容に同意します

回答2件

まずは落ち着いてセレクタの書き方を思い出してみましょう。

javascript
1$('#list06#list07')
2↓
3$('#list06,#list07')

投稿2021/02/15 12:10

AT_2nd

総合スコア266

Rinkun

2021/02/16 00:22

ありがとうございます。書き直しました。検証で確認するとエラーもなく動いているのですが、問題の該当の2つのlistの部分は一瞬紫になり反応しているものの、currentが追加されません。多分条件式が間違っているのかなと予測しています。。そこで宣言の部分と条件式を色々とこねくり回していたのですが、どうにも上手くいきません。。現在はこのように記述しています。 flexでlist06とlist07が同じ横並び、高さになっているので、 varの宣言の部分でlist07に＋250pxし、list06よりも高くしてみました。そして条件式はスクロール分がlist6以上かつlist07以下のときにaddClass current スクロール分がlist07よりも大きいときにremoveClass current と書いているつもりです。。 $(window).on('load resize',function(){ var pos01 = Math.round($("#storeinfo").offset().top - 250); var pos02 = Math.round($("#fourmenu").offset().top - 250); var pos03 = Math.round($("#takeout").offset().top - 250); var pos04 = Math.round($("#inside-look").offset().top) - 250; var pos05 = Math.round($("#sozai").offset().top - 250); var pos06 = Math.round($("#intro").offset().top - 250); var pos07 = Math.round($("#media").offset().top + 250); $(window).on('load resize scroll',function(){ var posScroll = $(window).scrollTop(); if(pos01 <= posScroll && posScroll < pos02) { $("#list01").addClass('current').siblings('li').removeClass('current'); } else if(pos02 <= posScroll && posScroll <= pos03) { $("#list02").addClass('current').siblings('li').removeClass('current'); } else if(pos03 <= posScroll && posScroll <= pos04) { $("#list03").addClass('current').siblings('li').removeClass('current'); } else if(pos04 <= posScroll && posScroll <= pos05) { $("#list04").addClass('current').siblings('li').removeClass('current'); } else if(pos05 <= posScroll && posScroll <= pos06) { $("#list05").addClass('current').siblings('li').removeClass('current'); } else if(pos06 <= posScroll && posScroll <= pos07) { $('#list06,#list07').addClass('current').siblings('li').removeClass('current'); } else if(pos07 <= posScroll) { $('#list06,#list07').removeClass('current').siblings('li').removeClass('current'); } }); });