<br> 在 JQuery 中搞砸 .next()

Question

我正在编写一个名为 wigi(board) 的实验性分页界面，但运行遇到了问题。

该界面由任何 l1（主题）class 或 l2（副标题）class 运行垂直向下工作。页面（l3 class 节点）表示为附加到 l1 或 l2 一侧的点。

将鼠标悬停在任何节点上会将选择器移动到该节点并调用数据库查询以显示特定页面的内容。这很好用。它像它应该的那样移动。

现在我有一些按钮，它们也可以在导航列表中的下一个和上一个 li 之间移动。这些是用于将来滑动和其他交互以演示问题的填充符。

现在这些按钮工作到一定程度，直到 jquery.next() 命中一个
节点，我正在使用它来打破 l3 行并继续垂直于下一个 l1 或 l2。当 .next 到达其中一个节点之前的最后一个节点时，它会停止并且不会跳到下一行。为什么？修复它的最佳策略是什么？

JS fiddle: http://jsfiddle.net/93g786jp/ next 的问题就在这里。运行宁在一个li列表上（最好看JSfiddle）

  function nextAndBack(e) {
var cur = $('.dots .selected'),
    next = cur.next('li'),
    prev = cur.prev('li');
if (e.target.id == 'nextButton') {
    if (next.length == 1) {
        newSelected(next);
        console.log("Next Node:")
        console.log(next);
        $(next).trigger("mouseover");
    }
} else if (e.target.id == 'prevButton') {
    if (prev.length == 1) {
        newSelected(prev);
        console.log("Previous Node:")
        console.log(prev);
        $(prev).trigger("mouseover");
    }
}

}

请注意，这是基于 Lucas Bebber @ https://codepen.io/lbebber/pen/lFdHu 的粘性界面，这是我能找到的最适合我想要的界面的界面。对于发布的示例，我删除了所有效果和其他额外内容，因此存在一些存根。

Answer 1

由于 <br /> 妨碍了选择兄弟姐妹，您可以改用 nextAll() 或 prevAll()，然后获取所选项目的 first()：

next = cur.nextAll('li').first(),
prev = cur.prevAll('li').first();

function wigiBoardMove() {
  var cur = $(this);
  var desty = cur.position().top;
  var destx = cur.position().left;
  var t = 0.6;
  gsap.to($(".select"), t, {
    y: desty,
    ease: Back.easeOut
  });
  gsap.to($(".select"), t, {
    x: destx,
    ease: Back.easeOut
  });
  newSelected(cur);
}


function newSelected(newTarget) {
  $('.selected').removeClass('selected');
  newTarget.addClass('selected');
}


function nextAndBack(e) {
  var cur = $('.dots .selected'),
    next = cur.nextAll('li').first(),
    prev = cur.prevAll('li').first();

  if (e.target.id == 'nextButton') {
    if (next.length == 1) {
      newSelected(next);
      $(next).trigger("mouseover");
    }
  } else if (e.target.id == 'prevButton') {
    if (prev.length == 1) {
      newSelected(prev);
      $(prev).trigger("mouseover");
    }
  }
}


/* Modified from gooey pagnation code published by Lucas Bebber @ https://codepen.io/lbebber/pen/lFdHu */
$(function() {
  $(".dot").on("mouseenter", wigiBoardMove);
  var lastPos = $(".select").position().top;

  function updateScale() {
    var pos = $(".select").position().top;

    var speed = Math.abs(pos - lastPos);
    var d = 44;
    var offset = -20;
    var hd = d / 2;
    var scale = (offset + pos) % d;
    if (scale > hd) {
      scale = hd - (scale - hd);
    }
    scale = 1 - ((scale / hd) * 0.35);
    gsap.to($(".select"), 0.1, {
      scaleY: 1 + (speed * 0.06),
      scaleX: scale
    })

    lastPos = pos;
    requestAnimationFrame(updateScale);
  }
  requestAnimationFrame(updateScale);
  $(".dot:eq(0)").trigger("mouseover");

  // Back and Forward Node Logic
  $('#nextButton, #prevButton').on('click', nextAndBack);
})

#container {}

.dots {
  list-style-type: none;
  padding: 0;
  margin: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  margin-left: -10px;
  padding-right: 10px;
  position: absolute;
  top: 0px;
  width: 150px;
  right: 0px;
}

.dot {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  margin-right: 5px;
  cursor: pointer;
  color: white;
  position: relative;
  z-index: 2;
}

.l1 {
  border-radius: 100%;
  width: 10px;
  height: 10px;
  background: blue;
  border: none;
}

.l3 {
  border-radius: 100%;
  width: 7px;
  height: 7px;
  border: none;
  background: blue;
}

.select {
  display: block;
  border-radius: 100%;
  width: 15px;
  height: 15px;
  background: #daa520;
  position: absolute;
  z-index: 3;
  top: -4px;
  left: 1px;
  pointer-events: none;
}

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

<div id="container">
  <ul class="dots">
    <li class="select"></li>
    <li class="dot l1"></li>
    <li class="dot l3"></li>
    <li class="dot l3"></li>
    <li class="dot l3"></li><br>
    <li class="dot l1"></li>
    <li class="dot l3"></li>
    <li class="dot l3"></li><br>
    <li class="dot l1"></li>
    <li class="dot l3"></li><br>
  </ul>
  <img id="nextButton" height="10" width="10" alt="Next Node" /><br>
  <img id="prevButton" height="10" width="10" alt="Previous Node" />
</div>

<br> 在 JQuery 中搞砸 .next()

<br> mucking up .next() in JQuery

javascript

jquery

user-interface

frontend

user-experience