减少 A 到 Z 字母集的函数数量答案

【问题标题】：Reduce the Number of Functions for an A-to-Z set of Letters减少 A 到 Z 字母集的函数数量
【发布时间】：2021-12-05 16:25:35
【问题描述】：

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

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

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

【问题讨论】：

你应该添加minimal reproducible code
"有没有办法将其缩短为更少的函数？" - 是的，但不是没有看到相关代码的完整上下文 - decpk 所要求的。

标签： javascript function

【解决方案1】：

您正在使用Element ids（MDN Webdocs 链接）将您的函数绑定到您的元素。当您有一堆需要相同功能的元素时，只需使用Element ClassName（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 = ''；您可能需要不同的条件和设置器，可能是if(this.classList.contains('rightside')) {.. 和this.classList.add('rightside') 以及this.classList.remove('rightside')。我没有这样做，因为我想要在演示中完全重现的东西。

【讨论】：

非常感谢，它成功了。下次加个demo谢谢。
@HplNexie 没问题，如果有帮助别忘了采纳答案，让其他人知道该怎么做！谢谢！

【解决方案2】：

事件委托允许您对无限数量的元素使用单个事件侦听器。

在包含您要单击的所有元素的父元素上添加事件侦听器：

document.querySelector(Parent).onclick = clickHandler;

在clickHandler(event) 中使用event.target 来获取被点击的元素：

const clicked = event.target

检查它是否是正确的元素：

if (clicked.matches('.node')) {...

养成使用class 而不是#id 的习惯下面的示例允许您在两个容器之间移动项目。

const moveNode = event => {
  const clicked = event.target;
  const from = clicked.parentElement;
  const toB = document.querySelector('.B');
  const toA = document.querySelector('.A');

  if (clicked.matches('.node')) {
    const node = from.removeChild(clicked);

    if (from.matches('.A')) {
      toB.appendChild(node);
    } else {
      toA.appendChild(node);
    }
  } else {
    return false;
  }
}

const main = document.querySelector('main');

main.onclick = moveNode;

main {
  display: flex;
  justify-content: space-around;
}

section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 45vw;
  min-height: 20vh;
  border: 1px solid black;
}

.node {
  font-size: 3ch;
  border: 1px solid black;
  width: 3ch;
  height: 2ch;
  text-align: center;
  cursor: pointer;
}

<main>
  <section class='A'>
    <div class='node'>A</div>
    <div class='node'>B</div>
    <div class='node'>C</div>
    <div class='node'>D</div>
    <div class='node'>E</div>
    <div class='node'>F</div>
    <div class='node'>G</div>
  </section>

  <section class='B'></section>
</main>

【讨论】：