Question

我需要创建一个jQuery脚本，该脚本模拟元素列表中另一个元素的单击，并且每当我按下按钮时，单击列表中的下一个元素，并且每当我按下按钮时，就单击上一个单击列表中的元素。

这是部分起作用的代码，但只单击一次

$('#next').click(function() {
  $('li a').trigger('click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <span>
    <span>
    <a href="#" class="current">image</a>
    </span>
    </span>
  </li>
  <li>
    <span>
    <span>
    <a href="#" class="">image</a>
    </span>
    </span>
  </li>
  <li>
    <span>
    <span>
    <a href="#" class="">image</a>
    </span>
    </span>
  </li>
</ul>
<div id="prev">prev</div>
<div id="next">next</div>

简而言之，当我按下按钮“ next”时，我想模拟元素在“当前”类之后的标签点击，但是当我按下按钮“ previous”时，我想模拟之前的标签点击类为“当前”的元素。

遗憾的是，对于这种布局来说，跨度是必需的，如果不存在跨度，我很可能会使用.next（）函数，就像我在类似的堆栈文章中看到的那样，但是由于在我的情况下，元素没有直接定位一个接一个，这个功能不起作用，或者我不能使它起作用。

谢谢！

Answer 1

根据@Taplar的评论创建答案。

此代码示例将{/ {1}}的上一个/下一个前进作为当前类的基础。它找到a，然后转到下一个（或上一个）并触发点击。

closest()：给定一个表示一组DOM元素的jQuery对象，.closest（）方法将在DOM树中搜索这些元素及其祖先

closest li

$('#next').click(function() {
  var $next = $('a.current').closest('li').next().find("a");
  $next = $next.length > 0 ? $next : $("ul li:first-child a"); //if the end get the first one.
  $next.trigger('click');
});
$('#prev').click(function() {
  var $prev = $('a.current').closest('li').prev().find("a");
  $prev = $prev.length > 0 ? $prev : $("ul li:last-child a"); //if the start get the last one.
  $prev.trigger('click');
});
//sample "click" event to toggle the current class
$("li a").click(function(e) {
  e.preventDefault();
  $("li a").removeClass("current");
  $(this).addClass("current");
});

.current {
  background-color: orange;
}

div[id] {
  border: 1px solid #ccc;
  border-radius: 10px;
  height: 20px;
  width: 50px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
}

按下上一个和下一个按钮时，模拟元素列表中的元素单击

1 个答案: