javascript - Animate CC HTML5 尝试通过调用字符串来更改全局变量

Question

我是一名资深的 ActionScript 编码员，并且正在第一次尝试 JavaScript。大多数情况下，它并不太复杂，但是当我创建大量类似于切换的按钮时，我遇到了一些问题。这是到目前为止的代码(我删除了其中的一些代码，但是，其中大约有 20 个，而不仅仅是 5 个)。

var aOneOn = false;
var aTwoOn = false;
var aThreeOn = false;
var aFourOn = false;
var aFiveOn = false;

this.One.addEventListener("click", highlightButton.bind(this));
this.Two.addEventListener("click", highlightButton.bind(this));
this.Three.addEventListener("click", highlightButton.bind(this));
this.Four.addEventListener("click", highlightButton.bind(this));
this.Five.addEventListener("click", highlightButton.bind(this));  


function highlightButton(event)
{
    console.log("You have selected a button " + event.currentTarget.name);  //Three
    var newName = "a" + event.currentTarget.name + "On";
    console.log("the buttons new name is " + newName); //aThreeOn
    console.log("the correct answer is " + aTwoOn); //false
    console.log("the button is currently " + this[newName]); //undefined
    if(this[newName] == true)
    {
        console.log("we should be turning it false now");
        this[newName] = false;
    }
    else if (this[newName] == false)
    {
        console.log("we should be turning it true now");
        this[newName] = true;
    }
    console.log("the button " + newName + " is now " + this[newName]);
}

这不会导致 newName 在按下“Two”按钮时能够实际访问 aTwoOn，或者任何按钮按我希望的方式运行。我想我只是在范围方面遗漏了一些东西，但似乎无法弄清楚需要做什么。

感谢您为这个菜鸟提供的任何帮助。

Answer 1

我认为这与线路有关

var newName = "a"+ event.currentTarget.name + "On";

如果 event.currentTarget.name 结果是 undefined，则 newName 将计算为

var newName = "aundefineOn";

这可能就是原因，它对于您的用例来说一定是失败的。另外，如果不查看您的 HTML，就很难说。

您可以添加或删除元素的类，而不是修改跟踪按钮是否切换的变量的状态。

此外，您可以拥有一个公共(public)类，并将事件处理程序绑定(bind)到具有该类的元素，而不是分别将事件绑定(bind)到每个按钮。

JS

let toggleElems = document.querySelectorAll('.toggle');

toggleElems.forEach(function(elem) {
  elem.addEventListener("click", highlightButton);
});


function highlightButton(event) {
  let elem = event.target;
  console.log("You have selected a button " + event.currentTarget.name);
  var newName = "a" + elem.name + "On";
  var isOn = elem.classList.contains('on');

  if (isOn) {
    console.log("we should be turning it false now");
    elem.classList.remove('on');
  } else {
    console.log("we should be turning it true now");
    elem.classList.add('on');
  }
}

HTML

<div class="toggle" name="one">
  toggle 1
</div>
<div class="toggle" name="two">
  toggle 2
</div>
<div class="toggle" name="three">
  toggle 3
</div>
<div class="toggle" name="four">
  toggle 4
</div>
<div class="toggle" name="five">
  toggle 5
</div>

<强> Check Fiddle

最重要的是，要查找点击“完成”按钮时突出显示的所有元素，您只需再次使用事件类进行查询即可。

var highlightedElements = document.querySelectorAll('.toggle.on');