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

Posted 2023-02-16

【中文标题】Animate CC HTML5 试图通过调用字符串来更改全局变量

【英文标题】：Animate CC HTML5 attempting to change a global variable by calling a string

【发布时间】：2017-06-06 01:58:32

【问题描述】：

我是一名资深的 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，或者任何按我希望的方式运行的按钮。我想我只是在范围方面遗漏了一些东西，但似乎无法弄清楚需要做什么。

感谢您对这个菜鸟的任何帮助。

【问题讨论】：

你能描述一下发生了什么吗？

当然...在游戏中，学生将选择需要练习的 20 种问题，这些问题将显示在 20 个按钮中。当他们点击一个按钮时，它会突出显示。如果他们再次单击它，它将取消突出显示。然后，当他们选择了他们想要练习的所有内容时，他们将点击“完成”按钮。这部分代码基本上是打开和关闭不同的选项。一旦他们完成，它将通过并查看哪些已打开并将它们添加到问题列表中。希望这是有道理的。

@NatashaOliver html 请

抱歉，这一切都是在 Animate CC 中完成的，所以暂时没有 HTML。

需要知道event.currentTarget.name 正在评估什么。因为这可能是您的代码无法正常工作的根本原因。

【参考方案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');

【讨论】：

虽然我不确定我能否完全按照您的建议进行操作，但我肯定看到了创建类然后添加和删除参数的好处。我会看看我是否可以在 Animate CC 中仅使用 javascript 来做到这一点。