Question

我是一名经验丰富的动作编码员，我正在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，或者任何按钮按我所希望的那样运行。我想我在范围方面只是遗漏了一些东西，但似乎无法弄清楚需要做些什么。

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

Answer 1

我认为这与行

有关

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

如果event.currentTarget.name原来是undefined，则newName会评估为

var newName = "aundefinedOn";

这可能是原因，它一定是你的用例失败了。如果不看你的HTML，也很难说。

你可以add或remove元素的类，而不是修改变量的状态，如果按钮被切换，它会跟踪。

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

<强> 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');

动画CC HTML5尝试通过调用字符串来更改全局变量

1 个答案: