如何获取 img 的下一个 ID

Question

当我将 li 悬停在数字 3 上时，我在 img 中得到 next id 的错误数字。第一次悬停时，我得到 next id = 4，这是错误的。在第二次悬停时，我得到 next id = 0 这就是我需要的。如何正确地next id像旋转木马一样悬停

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>

Answer 1

你需要在比较之前从当前元素中获取nextid的值

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

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

Answer 2

@crack_iT 是的，你只需要初始化这个值。我会这样设置...

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"));
});

Answer 3

很多解决方案，例如：

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

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

  });

如果你想捕获img的id号:

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

replace(/\D/g,"") 只保留数字

如果您的数字如下，您可以使用模函数 % 之后...

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

所以 4 模 4 = 0

Answer 4

首先，您应该初始化 li 元素，添加一个新的自定义属性，然后使用下一个索引，如下所示：

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');

链接节点后，可以直接使用li.attr('data-next')

读取

如何获取 img 的下一个 ID

How to get next id for img

html

javascript

css

jquery

carousel