Javascript 单击将边框添加到另一个类

单击框“1”时，框a周围应出现边框。单击框“a”时，框“b”周围应显示边框，以此类推。。。 要实现这一点，JavaScript应该是什么样子的

.list box li{显示：内联；列表样式类型：无；填充：2em；背景：红色；}
.列表框{页边距顶端：50px；}
.box套筒li{显示：内联；列表样式类型：无；填充：2em；背景：红色；}
.box套筒{边距：100px自动；}

1
2
3
4

一些文本

a
b
c
d

通过创建数组，我们可以“同步”两组框

//获取对两组框的引用
变量编号=document.queryselectoral（“.click”）；
var字母=document.queryselectoral（“.border”）；
//将每个节点列表转换为适当的数组：
numbers=Array.prototype.slice.call（numbers）；
字母=Array.prototype.slice.call（字母）；
//循环遍历所有的数字框
数字。forEach（函数（框，索引）{
//为所有数字框设置单击事件处理程序
addEventListener（“单击”，函数（）{
//删除每个信箱的边框
字母。forEach（功能（方框）{
box.classList.remove（“showBorder”）；
});
//仅将边框应用于单击的元素
字母[index].classList.add（“showBorder”）；
});
});
.list box li{显示：内联；列表样式类型：无；填充：2em；背景：红色；}
.列表框{页边距顶端：50px；}
.box套筒li{显示：内联；列表样式类型：无；填充：2em；背景：红色；}
.box套筒{边距：100px自动；}
.showBorder{border:3px纯黑色；}


1
2
3
4


a
b
c
d

通过创建数组，我们可以“同步”两组框


//获取对两组框的引用
变量编号=document.queryselectoral（“.click”）；
var字母=document.queryselectoral（“.border”）；
//将每个节点列表转换为适当的数组：
numbers=Array.prototype.slice.call（numbers）；
字母=Array.prototype.slice.call（字母）；
//循环遍历所有的数字框
数字。forEach（函数（框，索引）{
//为所有数字框设置单击事件处理程序
addEventListener（“单击”，函数（）{
//删除每个信箱的边框
字母。forEach（功能（方框）{
box.classList.remove（“showBorder”）；
});
//仅将边框应用于单击的元素
字母[index].classList.add（“showBorder”）；
});
});
.list box li{显示：内联；列表样式类型：无；填充：2em；背景：红色；}
.列表框{页边距顶端：50px；}
.box套筒li{显示：内联；列表样式类型：无；填充：2em；背景：红色；}
.box套筒{边距：100px自动；}
.showBorder{border:3px纯黑色；}


1
2
3
4


a
b
c
d

我们可以使用jQuery来实现这一点：

$(document).ready(function(){
  var $list = $("ul.list-box");
  var $sleeves = $("ul.box-sleeve");
  var $listLI = $list.children("li");
  var $sleevesLI = $sleeves.children("li");

  $listLI.each(function(index, elem){
    var $curr_li = $listLI.eq(index);//I know you can use $(this) but it's for understanding purpose that I don't use it

    $curr_li.click(function(){
     var $corresponding_sleeveLI = $sleevesLI.eq(index);
     $corresponding_sleeveLI.toggleClass("borderAround");
    });
  });
});

然后将其添加到CSS中：

.borderAround{
  border:/*some border settings for when you have those border around*/;
  transition:/*some transition settings if you wanna have any*/;
}


编辑

如果您希望一次只突出显示一个框，您可以（在单击EH中，在
切换类
之后或之前）：

我们可以使用jQuery来实现这一点：

$(document).ready(function(){
  var $list = $("ul.list-box");
  var $sleeves = $("ul.box-sleeve");
  var $listLI = $list.children("li");
  var $sleevesLI = $sleeves.children("li");

  $listLI.each(function(index, elem){
    var $curr_li = $listLI.eq(index);//I know you can use $(this) but it's for understanding purpose that I don't use it

    $curr_li.click(function(){
     var $corresponding_sleeveLI = $sleevesLI.eq(index);
     $corresponding_sleeveLI.toggleClass("borderAround");
    });
  });
});

然后将其添加到CSS中：

.borderAround{
  border:/*some border settings for when you have those border around*/;
  transition:/*some transition settings if you wanna have any*/;
}


编辑

如果您希望一次只突出显示一个框，您可以（在单击EH中，在
切换类
之后或之前）：

你有没有为此写过JS？你有没有为此写过JS？谢谢你的建议。如果我一次只需要突出显示一个呢？对于一个明显的初学者来说，我试图使它尽可能简单化。不过我确实理解并同意你的观点，所以我删除了我的答案。斯科特，为我提供免费问题的零研究代码的高质量答案让网络变得更好，这也是我的使命宣言+1来自我。@user3767554更新的答案。@KyleRichardson谢谢你这么做。问题是（许多开发人员没有意识到）内联HTML属性不仅仅是丑陋的。它们可以并且确实修改代码的执行方式。在任何情况下都不能使用。谢谢你的建议。如果我一次只需要突出显示一个呢？对于一个明显的初学者来说，我试图使它尽可能简单化。我理解并同意你的观点，所以我删除了我的答案。提供高质量的answ