Javascript 如何将包含文本的额外类（.info）添加到我的js代码中

.info的操作方式与.showBorder相同，表示将沿着边框移动，但将放置在方框上方。我们也欢迎使用jQuery更好地构造此结构，欢迎所有建议

//获取对两组框的引用
变量编号=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{显示：内联；列表样式类型：无；填充：1em；背景：红色；}
.列表框{边距：50px自动；}
.box套筒li{显示：内联；列表样式类型：无；填充：1em；背景：红色；}
.box套筒{边距：50px自动；}
.showBorder{border:3px黑色虚线；}
.info{margin:0；padding:1em；}


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”）；
});
//仅将边框应用于单击的元素
var info=document.getElementsByClassName（'info'）[0]；
info.style.left=10+（索引*45）+“px”；
info.style.display='inline'；
字母[index].classList.add（“showBorder”）；
});
});
.list box li{显示：内联；列表样式类型：无；填充：1em；背景：红色；}
.列表框{边距：50px自动；}
.box套筒li{显示：内联；列表样式类型：无；填充：1em；背景：红色；}
.box套筒{边距：50px自动；}
.showBorder{border:3px黑色虚线；}
.info{margin:0；padding:1em；position:relative；display:none；}


1
2
3
4

段落

a
b
c
d

在方框上方
你能手动给我们看一下它应该是什么样子吗？@Oen44文本“段落”需要沿着与边框相同的方向移动几乎完美地满足了我的需要，但文本只能在激活时显示。showBorder？完美，正是这一点！