在按鈕上單擊如何更改焦點

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使用結構很好的代碼集。