点击按钮后如何改变焦点

Question

我有一个包含n个锚点标记和一个按钮标记的HTML页面。

<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的东西。非常感谢您的帮助。

- Ankit Sharma

---

ID 应该是唯一的。这是错误的 HTML。 - Manwal

更具体地说，这是无效的HTML，因此对其进行操作所产生的任何行为都是未定义的。 - David

为什么这个问题得到了赞成？ - Manwal

尽管 OP 的代码无效，但这仍然是一个相当不错的问题。脚本和 HTML 都有错误。虽然显示了一些尝试，但并没有展示出对类和 ID 的完全理解。应该更深入地研究它们，特别是在 CSS 和 jQuery 方面，以便理解更加深入。 - Cayce K

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

演示

完整的工作代码片段：

---

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

更新后的演示

- Manwal

Answer 2

如果你正在使用id，它们应该是唯一的，所以你需要使用class来处理相同的名称。 更改

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

到

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

给你的容器 HTML 元素命名一个类名。我假设你将文本存储在 a 标签中，所以应该是这样的：

更改

<a id="abc1">

至

<a class="myNiceClass">

那很容易

- hakkikonu

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使用非常结构化的代码集。

- Cayce K