javascript - 如何在名称为字符串的对象上使用方法？

Question

我回来时遇到了另一个问题。

我有这样的代码:

HTML

<button>first</button>
<button>second</button>

<div class="first"></div>
<div class="second"></div>

CSS

div{
  margin-top: 10px;
  width: 100px;
  height: 100px;
  border:1px solid black;
  background-color: #ddd;
}

JS

const btns = document.querySelectorAll("button");
const first = document.querySelector(".first");
const second = document.querySelector(".second");

btns.forEach(btn => btn.addEventListener("click", function(){
  this.classList.toggle("pressed");
  let selection = this.textContent;

  // selection.style.transform = "translate(100px)";
}))

https://codepen.io/ptr11dev/pen/oREymM

我想创建一个函数，负责将相应的 div 向右移动 100px - 我遇到了这样的问题。在“选择”下，我有各自的 div 名称(存储在同一名称下)，但简单的代码如

selection.style.transform = "翻译(100px);"

不起作用。我知道像创建两个函数并使用这样的解决方法

first.style.transform = "翻译(100px);"

和

second.style.transform = "翻译(100px);"

可以工作，但在我的主代码中它有点复杂。

我非常感谢您提供的任何意见。谢谢

附注我想使用 Vanilla JS。

Answer 1

假设按钮文本和它们的类相同，您可以通过类名称找到它们。

const btns = document.querySelectorAll("button");
const first = document.querySelector(".first");
const second = document.querySelector(".second");

btns.forEach(btn => btn.addEventListener("click", function(){
  this.classList.toggle("pressed");
  let selection = this.textContent;
  
  document.querySelector(`.${selection}`).style.transform = "translate(100px)";
}))

div{
  margin-top: 10px;
  width: 100px;
  height: 100px;
  border:1px solid black;
  background-color: #ddd;
}

<button>first</button>
<button>second</button>

<div class="first"></div>
<div class="second"></div>