javascript - 减少 A 到 Z 字母组的函数数量

Question

https://prnt.sc/21vc411 正如您在链接上看到的那样，当我单击左侧或右侧的一个字母时，该字母应该消失并且应该转到另一侧。例如，当我单击左侧的“A”字母时，它会向右移动。我在每一侧创建了一个字母，默认情况下右侧的显示为“无”。因此，当我单击左侧的那个时，以下功能将启动；

function myFunction() {
document.getElementById("aLetterLeftSide").style.display="none";
document.getElementById("aLetterRigtSide").style.display="inline-block";
}       

它有效，但我必须对每个具有不同 ID 的字母执行此操作。所以大约有 50 个函数 :( 有没有办法将其缩短为更少的函数？谢谢您的回答 :)

Answer 1

您正在使用 Element ids 将您的函数绑定(bind)到您的元素(MDN 网络文档链接)。当你有一堆需要相同功能的元素时，只需使用 Element ClassName 绑定(bind)它们即可。 (MDN Webdocs 链接)代替。

在下面的示例中，我简单地将 class 的字母定义为 letter-span，然后设置 onclick (MDN Webdocs 链接)属性迭代...

var letterspans = document.getElementsByClassName("letter-span");

var onclickfunc = function(e) {
  if(this.style.float) {
    this.style.float = '';
  } else {
    this.style.float = 'right';
  }
};

for(i = 0; i < letterspans.length; i++) {
  letterspans[i].onclick = onclickfunc;
}

<span data-letter="a" class="letter-span">A</span> | 
<span data-letter="b" class="letter-span">B</span> | 
<span data-letter="c" class="letter-span">C</span> | 
<span data-letter="d" class="letter-span">D</span> 

注意

以上是完整的、可运行的独立演示(请注意:Minimal Reproducible Code)。在这种情况下，我做了 if(this.style.float){ 和 this.style.float = '';您可能需要不同的条件和 setter ，也许 if(this.classList.contains('rightside')) {.. 和 this.classList.add('rightside') 以及 this.classList.remove('rightside')。我没有这样做，因为我想要在演示中完全重现的东西。