Переключить новый ли и по-прежнему считать последние

Question

У меня есть эти <img> теги, которые имеют уникальные значения. Некоторые из них отображаются на другом <div>, который я переключаю.

Как вы можете видеть, когда я нажимаю на переключенном <div> s <img> s, счет начинается снова. Я пытался val('') <img> s при переключении, которое работает, но я хотел бы видеть их на заднем плане.

Могу ли я что-нибудь добавить в свой код, не удаляя var img_id = $(this).closest('li').index();, чтобы он учитывал все теги <li>?

$("#yy").click(function(){
  $("#why").fadeToggle(250);
  $("#tts").css("display", "none");
});
    
$(".iq").on('click', '[data-video]', function(){
  var img_id = $(this).closest('li').index();
  alert(img_id);
});

#why{
  width:100%;
  top:0;
  height:50%;
  background-color:rgba(79, 79, 90, 0.92);
  z-index: 2;
  display: none;
  position: fixed;
}
#yy{
  background-color:black;
  width:50px;
  height:50px;
  bottom:0;
  position:absolute;
}
li{
  list-style:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id = "searchBarN" class = "iq">
  <li class="rutor"><img data-video="one" alt="play"> </li><br>
  <li class="rutor"><img data-video="2"  alt="play"> </li><br>
  <li class="rutor"><img data-video="3"  alt="play"> </li><br>            
</div>

<div id = "why" class = "iq">
  <li class="rutor"><img data-video="4"  alt="play"> </li><br>
  <li class="rutor"><img data-video="5"  alt="play"> </li>  <br> 
  <li class="rutor"><img data-video="6"  alt="play"> </li><br>
</div>

<div id = "yy"></div>

Answer 1

Sidenote: я думаю, что вы не должны использовать index(), так как это учитывает <br> и все дополнительные теги, которые вы можете добавить позже (вот почему вы видите 0/2/4 вместо 0 /1/2). Вместо этого вам лучше использовать attr('data-video'), но это зависит от ваших потребностей.

---

Я не понимаю, чего вы пытаетесь достичь с помощью этого кода, но без изменения всего, что я думаючтобы определить, нажали ли вы на #why дочерний элемент, и если это так, добавьте число #searchBarN прямых дочерних элементов в свой индекс:

$("#yy").click(function(){
  $("#why").fadeToggle(250);
  $("#tts").css("display", "none");
});

$(".iq").on('click', '[data-video]', function(){
  var index = $(this).closest('li').index();
  if ($(this).parents('#why').length) {
    index += $('#searchBarN > *').length;
  }
  alert(index);
});

#why{
  width:100%;
  top:0;
  height:50%;
  background-color:rgba(79, 79, 90, 0.92);
  z-index: 2;
  display: none;
  position: fixed;
}
#yy{
  background-color:black;
  width:50px;
  height:50px;
  bottom:0;
  position:absolute;
}
li{
  list-style:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id = "searchBarN" class = "iq">
  <li class="rutor"><img data-video="one" alt="play"> </li><br>
  <li class="rutor"><img data-video="2"  alt="play"> </li><br>
  <li class="rutor"><img data-video="3"  alt="play"> </li><br>            
</div>

<div id = "why" class = "iq">
  <li class="rutor"><img data-video="4"  alt="play"> </li><br>
  <li class="rutor"><img data-video="5"  alt="play"> </li>  <br> 
  <li class="rutor"><img data-video="6"  alt="play"> </li><br>
</div>

<div id = "yy"></div>