Wartość do eq()

Question

Witam mam taki kod i chciałbym go zautomatyzować, do tego potrzebuje wartość do ".eq()" chciałbym żeby js sam mierzył który to. Nie wpisze this tam do indexsu bo on określa jakiś blok po swojemu. A tam potrzebuje zmiennej w postaci liczby.

 

.navbar-cale{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<aside class="col-3">

<div title="Konsole" class="nav-link">Konsole12</div>
<div class="navbar-cale">Konsole</div>
  

</aside>

$(document).ready(function(){
  
  
if (screen.width > 960) {
  $("aside").find(".nav-link").eq(0).click(function(){
    if($("aside").find(".nav-link").eq(0).hasClass("aktynep")){
      $("aside").find(".nav-link").eq(0).removeClass("nav-link aktynep").addClass("nav-link")
      $("aside").find(".navbar-cale").eq(0).css("display","none");
    } else {
      $("aside").find(".nav-link").eq(0).addClass("aktynep"); 
      $("aside").find(".navbar-cale").eq(0).css("display","block");
    }  
  });
  }
  
});

 

Answer 1

Może spróbuj użyć .index()

 

przykład

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<aside class="col-3"> 
  <div title="Konsole" class="nav-link">Konsole12</div>
  <div class="navbar-cale">Konsole2</div>
  <div title="Konsole" class="nav-link">Konsole13</div>
  <div class="navbar-cale">Konsole3</div>   
  <div title="Konsole" class="nav-link">Konsole14</div>
  <div class="navbar-cale">Konsole4</div>
  <div title="Konsole" class="nav-link">Konsole15</div>
  <div class="navbar-cale">Konsole5</div>
  <div title="Konsole" class="nav-link">Konsole16</div>
  <div class="navbar-cale">Konsole6</div>  
</aside>

.navbar-cale {
  display: none;
  padding-left: 1em;
}

$(document).ready(function() {

  if (screen.width > 960) {
    $("aside").find(".nav-link").click(function() {
      const index = $("aside").find(this).index() / 2;
      if ($("aside").find(".nav-link").eq(index).hasClass("aktynep")) {
        $("aside").find(".nav-link").eq(index).removeClass("aktynep");
        $("aside").find(".navbar-cale").eq(index).css("display","none");
      } else {
        $("aside").find(".nav-link").eq(index).addClass("aktynep"); 
        $("aside").find(".navbar-cale").eq(index).css("display","block");
      }  
    });
  }

});

 

Comments

lub użyć $(this).next()

 

przykład

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
  .navbar-cale {
    display: none;
    padding-left: 1em;
  }  
</style>

<aside class="col-3"> 
  <div title="Konsole" class="nav-link">Konsole12</div>
  <div class="navbar-cale">Konsole2</div>
  <div title="Konsole" class="nav-link">Konsole13</div>
  <div class="navbar-cale">Konsole3</div>   
  <div title="Konsole" class="nav-link">Konsole14</div>
  <div class="navbar-cale">Konsole4</div>
  <div title="Konsole" class="nav-link">Konsole15</div>
  <div class="navbar-cale">Konsole5</div>
  <div title="Konsole" class="nav-link">Konsole16</div>
  <div class="navbar-cale">Konsole6</div>  
</aside>

$(document).ready(function() {
 
  if (screen.width > 960) {
    $("aside").find(".nav-link").click(function() {
      if ($(this).hasClass("aktynep")) {
        $(this).removeClass("aktynep");
        // $(this).next(".navbar-cale").css("display","none");
        $(this).next().css("display","none");
      } else {
        $(this).addClass("aktynep");
        // $(this).next(".navbar-cale").css("display","block"); 
        $(this).next().css("display","block");
      }  
    });
  }
 
});

 

Answer 2

Generalnie odwołujesz się do pewnego elementu z javascriptem, więc musisz napisać funkcje która zwróci Ci dla tego elementu ... jego indeks w stosunku do rodzica np
 

const indexElement = Array.from(element.parentElement.children).indexOf(element)

gdzie element- będzie podwany "jako this", ewentualnie przypisz ten element do zmiennej z pomocą jQuery i przekaz do funkcji 

generalnie możesz wywołać funkcje przekazujac ją jako parametr 

something.eq(functionReturningIndex(element)).click(action... )