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 = "translate(100px);"

不起作用。我知道这种解决方法，例如创建两个函数并使用

first.style.transform = "translate(100px);"

和

second.style.transform = "translate(100px);"

可以工作，但是在我的主要代码中它要复杂一些。

真的很感谢您的任何意见。谢谢

P.S。我想使用Vanilla JS。

Answer 1

您的问题是textContext仅仅是TEXT不是对象。这会将选择设置为与作为this.textContent;

拉出的类名匹配的第一个元素。

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

Answer 2

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

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>

如何在对象名称中使用方法作为字符串？

2 个答案: