Javascript 我如何在我作为字符串的名称的对象上使用方法？

我带着另一个问题回来了

我有这样的代码：

HTML

JS

我想创建一个函数，负责将各个div以100px的速度移动到右侧-我遇到了这样的问题。在“selection”下，我有各自的div名称（以相同的名称存储），但代码很简单，如

selection.style.transform=“translate（100px）；”

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

first.style.transform=“translate（100px）；”

及

second.style.transform=“translate（100px）；”

可以，但在我的主代码中有点复杂

我非常感谢你方的任何意见。谢谢

---

另外，我想使用Vanilla JS。

你的问题是文本上下文只是文本而不是对象。这会将selection设置为与作为This.textContent提取的类名匹配的第一个元素

let selection = document.getElementsByClassName(this.textContent)[0];
selection.style.transform = "translate(100px)";

---

您的问题是textContext只是文本而不是对象。这会将selection设置为与作为This.textContent提取的类名匹配的第一个元素

let selection = document.getElementsByClassName(this.textContent)[0];
selection.style.transform = "translate(100px)";

---

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

const btns=document.queryselectoral（“按钮”）；
const first=document.querySelector（“.first”）；
const second=document.querySelector（“.second”）；
forEach（btn=>btn.addEventListener（“单击”，函数）（）{
这个.classList.toggle（“按下”）；
让selection=this.textContent；
document.querySelector（`.${selection}`）.style.transform=“translate（100px）”；
}))

div{
边缘顶部：10px；
宽度：100px；
高度：100px；
边框：1px纯黑；
背景色：#ddd；
}

首先
第二

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

const btns=document.queryselectoral（“按钮”）；
const first=document.querySelector（“.first”）；
const second=document.querySelector（“.second”）；
forEach（btn=>btn.addEventListener（“单击”，函数）（）{
这个.classList.toggle（“按下”）；
让selection=this.textContent；
document.querySelector（`.${selection}`）.style.transform=“translate（100px）”；
}))

div{
边缘顶部：10px；
宽度：100px；
高度：100px；
边框：1px纯黑；
背景色：#ddd；
}

首先
第二

Hmm。。这可能行得通，但这意味着我有两个对同一对象的引用。@PiotrKaczmarek，如果您没有先使用

first

和

second

，则不需要声明它们。我的答案和另一个答案一样，用两种不同的方法做同样的事情。您可以使用

eval

或一些奇怪的数组来装配一些东西，但是您正在过度复杂化一些东西，这样您就可以重用您已经声明的变量，是的，我已经重写了我的项目，这样就可以工作了。非常感谢你！隐马尔可夫模型。。这可能行得通，但这意味着我有两个对同一对象的引用。@PiotrKaczmarek，如果您没有先使用

first

和

second

，则不需要声明它们。我的答案和另一个答案一样，用两种不同的方法做同样的事情。您可以使用

eval

或一些奇怪的数组来装配一些东西，但是您正在过度复杂化一些东西，这样您就可以重用您已经声明的变量，是的，我已经重写了我的项目，这样就可以工作了。非常感谢你！

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)";
}))

let selection = document.getElementsByClassName(this.textContent)[0];
selection.style.transform = "translate(100px)";