【javascript】eqとnotを使用したindexの指定方法が分からない【jquery】

Question

解決したいこと

以下⓵⓶を実現したい
⓵Q10の子要素をクリックした時に、
その要素のインデックスと等しいid="q11"の子要素にis-bigというクラスを追加したい。

⓶⓵の処理と同時にそれ以外のクラスからis-bigを削除したい。
※インデックスの一致する要素だけにis-bigがついている状態にしたい

発生している問題・エラー

⓵は実現できるが、⓶を同時に処理することができない。

該当するソースコード

-html-```
      <ul class="u-mbm lists" id="jsi-q10">
        <li>Q10_1</li>
        <li>Q10_2</li>
        <li>Q10_3</li>
      </ul>
      <ul class="u-mbm lists" id="jsi-q11">
        <li>Q11_1</li>
        <li>Q11_2</li>
        <li>Q11_3</li>
      </ul>

--javascript--

          $("#jsi-q10")
            .find("li")
            .on("click", function () {
              let orderNumber = $(this).index();

              $("#jsi-q11").find("li")
                .eq(orderNumber).addClass("is-big");
              $("#jsi-q11").find("li")
                .not(eq(orderNumber).removeClass("is-big"));
            });

--css--
.is-big {
  font-size: 25px;
}

### 自分で試したこと
「eq()」「not:」の使用方法について調べました。

not:を使って『変数:orderNumber以外のものを指定する』ことができれば
解決できる問題ではないかというところまで整理できましたが、具体的な方針が分からず質問に至りました。調べる力不足で申し訳ございません。

### 整理できたこと

1.removeClassを使用して、適切なセレクタを指定する
2.jsi-q11.find("li")　かつ　orderNumber以外のindexを1で指定する

今回初めて質問させていただく初学者です。
分かりずらい点等あれば厳しくご指摘いただければと存じます。


※以下追記
テンプレートリテラル?という表記方法を調べ、下記のように修正したところ、⓵⓶を解決することができました。しかし、正しい表記方法か不安に感じております。

正しい表記方法かどうか、ご指摘等をいただきれば幸いでございます。

ー－－－－－－－－－－－－－－－－
          $("#jsi-q10")
            .find("li")
            .on("click", function () {
              let orderNumber = $(this).index();

              $("#jsi-q11").find("li").eq(orderNumber).addClass("is-big");
              $("#jsi-q11").find("li").not(`:eq(${orderNumber})`).removeClass("is-big");
            });
ー－－－－－－－－－－－－－－－－

Answer 1

jQuery

<style>
.is_big{font-size:1.5em;}
</style>
<script>
$(function(){
  $('#jsi-q10 li').on('click',function(){
    var idx=$('#jsi-q10 li').index(this);
    $('#jsi-q11 li').removeClass('is_big').eq(idx).addClass('is_big');
  });
});
</script>
<ul class="u-mbm lists" id="jsi-q10">
<li>Q10_1</li>
<li>Q10_2</li>
<li>Q10_3</li>
</ul>
<ul class="u-mbm lists" id="jsi-q11">
<li>Q11_1</li>
<li>Q11_2</li>
<li>Q11_3</li>
</ul>

該当するQ10を再度クリックしたらQ11をトグルする必要はないのですね？

js

<style>
.is_big{font-size:1.5em;}
</style>
<script>
document.addEventListener('click',e=>{
  const t=e.target.closest('#jsi-q10 li');
  if(t){
    const idx=[...document.querySelectorAll('#jsi-q10 li')].indexOf(t);
    document.querySelector('#jsi-q11 li.is_big')?.classList.remove('is_big');
    document.querySelector(`#jsi-q11 li:nth-child(${idx+1})`).classList.add('is_big');
  }
});
</script>
<ul class="u-mbm lists" id="jsi-q10">
<li>Q10_1</li>
<li>Q10_2</li>
<li>Q10_3</li>
</ul>
<ul class="u-mbm lists" id="jsi-q11">
<li>Q11_1</li>
<li>Q11_2</li>
<li>Q11_3</li>
</ul>

Comments

[KLB686]

回答ありがとうございます。

知識不足で申し訳ございません。

トグル>再度クリックした時に該当のQ11を「toggleClass」、is-bigを付け外しする動作が必要かどうか
というご質問でよろしいのでしょうか。
再度の付けはずしは発生しないものと想定していました。(的外れであれば申し訳ございません)

また、自分で再度調べてみたところ、テンプレートリテラル?という表記方法を使って、
修正をしてみたところ解決をしました。ただ、表記方法が正しいか大変不安に感じております。

よろしければ、【編集・修正】内容について書き方が正しいかご教示をいただければ幸いでございます。

[yambejp]

> is-bigを付け外しする動作が必要かどうかというご質問

そういうことです。
is_bigな「#jsi-q11 li」の10を再度クリックしてもis_bigを外す必要はないですね？・・・という質問です。
私の回答はトグルしない作りになっています