在按钮上单击如何更改焦点

Question

我有一个html页面，身体上有n个锚标签和一个按钮标签

<input type="button" value="Next" id="btn1">
<a id="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....  <br>
<a id="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>
<a id="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>
<a id="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>
<a id="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>

所有锚标签的id属性都是相同的现在我只想要点击按钮时锚点标签的焦点应该逐个变化，我已经尝试过这个jquery代码，但重点不是从第一个标签改变

$("#btn1").on("click", function () {
    $(this).next("#abc1").focus();
 });

如果可能的话，解决方案需要使用Javascript而不是像JQuery那样。

任何帮助非常感谢

Answer 1

ID应该是唯一的，你的HTML是无效的

尝试使用相同名称的class而不是同名的id

使用这个html：

<input type="button" value="Next" id="btn1">
<a class="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....  <br>
<a class="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>
<a class="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>
<a class="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>
<a class="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>

jQuery的：

$("#btn1").on("click", function () {
    $(this).next(".abc1").focus();
 });

DEMO

完整的工作片段：

---

var pos = 0;
$("#btn1").on("click", function () {
    $('a').closest(".abc1").eq(pos).focus();
    pos = (pos<4)?++pos:0;
 });

更新了DEMO

Answer 2

如果您正在使用id，它们应该是唯一的，因此您需要使用相同名称的类。 更改

$("#btn1").on("click", function () {
    $(this).next("#abc1").focus();
 });

至

$("#btn1").on("click", function () {
    $(this).next(".myNiceClass").focus();
 });

并给你的持有人html元素一个类名。 我假设你是存储在您的文章a标签，所以它应该是

更改

<a id="abc1">

至

<a class="myNiceClass">

这很容易

Answer 3

这些答案实际上不适用于你正在尝试的最终游戏......

每个人都有正确的思维过程，但实际上你需要调整他们的代码才能真正实现你想要的。

其他答案提供的代码将转到按钮的下一个类元素。 你想从给定的类（即第一类，第二类......等）。

$('#btn1').on("click",function(){
   var cur = $(this).next(".focused");
   if(cur.length > 0){
      cur.removeClass("focused").next(".abc1").focus().addClass("focused");
   }else{
      $(this).next("abc1").focus().addClass("focused");
   }
});

做其他所有改变类的东西...... @Manwal使用结构很好的代码集。