CODEWITHSUNDEEP
javascripthtmljquerycsscarousel
maplol
maplol

Reputation: 81

How to get next id for img

When I hover li with number 3 I get wrong number for next id in img. On first hover I get next id = 4, that's wrong. On second hover I get next id = 0 that's what I need. How to make correctly next id on hover like a carousel

let chosen_li = [];
let next_id;

$(".navigate li").on("mouseover", function () {
  let li = $(this);

  let index_li = li.index();

  chosen_li.unshift(index_li);
  if (chosen_li.length > 2) {
    chosen_li.pop();
  }
  if (chosen_li[0] !== chosen_li[1]) {
    $("#slider #img_" + chosen_li[0])
      .prependTo("#slider")
  }
  /////how to get next id?
  next_id =
    next_id > $(".navigate li").length - 1
      ? 0
      : parseInt($("#slider").children().attr("id").split("_")[1], 10) + 1;

  console.log(next_id);
  $("#slider #img_" + next_id).insertAfter($("#slider img:first"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider">
    <img id="img_0" src="1.jpg" style="margin-left:10px">
    <img id="img_1" src="2.jpg" style="margin-left:20px">
    <img id="img_2" src="3.jpg" style="margin-left:30px">
    <img id="img_3" src="4.jpg" style="margin-left:40px">
</div>

<ul class="navigate">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

Upvotes: 0

Views: 162

Answers (4)

Frenchy
Frenchy

Reputation: 17017

Lot of solutions, this for example:

  $(".navigate li").on("mouseover", function () {

    var id = parseInt($(this).text());
    var nextid = $(".navigate li").eq(id + 1).length ? id + 1 : 0;

  });

if you want to trap the number of id of img :

    var nextid = $("#slider").find("img").eq(id + 1).attr('id').replace(/\D/g,"");

replace(/\D/g,"") keeps only number

after you could use modulo function % if your number is following...

so nextid = (id + 1) % $(".navigate li").length;

so 4 modulo 4 = 0

Upvotes: 1

JMSalazarDev
JMSalazarDev

Reputation: 185

first of all you should initialize the li elements adding a new custom attribute with then next index like this:

function linkItems(selector) {
    const items = document.querySelectorAll(selector);
    items.forEach((node, index) => {
      node.setAttribute('data-next', (index +1));
    });
    items[items.length - 1].setAttribute('data-next', 0);
}
linkItems('ul.navigate li');

After linking the nodes, you can read directly using li.attr('data-next')

Upvotes: 1

carruthd
carruthd

Reputation: 341

@crack_iT is right you just need to initialize the value. I would set it like this...

let chosen_li = [];
let next_id;

$(".navigate li").on("mouseover", function () {
  let li = $(this);

  let index_li = li.index();
  

  chosen_li.unshift(index_li);
  if (chosen_li.length > 2) {
    chosen_li.pop();
  }
  if (chosen_li[0] !== chosen_li[1]) {
    $("#slider #img_" + chosen_li[0])
      .prependTo("#slider")
  }
  /////how to get next id?
  next_id = index_li +1;
  next_id =
    next_id > $(".navigate li").length - 1
      ? 0
      : parseInt($("#slider").children().attr("id").split("_")[1], 10) + 1;

  console.log(next_id);
  $("#slider #img_" + next_id).insertAfter($("#slider img:first"));
});

Upvotes: 1

Mesar ali
Mesar ali

Reputation: 1898

you need to get value of nextid from current element before comparison

next_id = parseInt($("#slider").children().attr("id").split("_")[1], 10) + 1; 

if (next_id > ($(".navigate li").length - 1) )
  next_id = 0;

Upvotes: 1

Related Questions