Question

我是Javascript的新手，所以我不确定我是否在这里提出正确的问题。但是我有6个元素 - 6棵树，用户可以点击它们然后消失。在他们所有人都消失之后，我想要别的事情发生。但是因为我不知道用户会点击它们的顺序（我还没有真正了解JS）我认为if / else语句询问是否只有0树木离开，然后调用一个新的功能。

不幸的是我似乎无法让它发挥作用，我不知道我是以错误的方式写它还是把它放在错误的地方或只是做错了，但似乎它给了一个因为用户还没有点击任何内容，所以在开头就已经出现了错误的结果。那么如何让它在循环中运行并检查多少树被遗留多次？

对不起，代码有点长，但我还不确定如何优化它并让它缩短。

var TreesLeft = 6;
function TreeGoneOnClick(){
console.log("TreeGoneOnClick");
    BigTrees.classList.add("flash");
//click each tree
    tree1.addEventListener("click", tree1Clicked);
    tree2.addEventListener("click", tree2Clicked);
    tree3.addEventListener("click", tree3Clicked);
    tree4.addEventListener("click", tree4Clicked);
    tree5.addEventListener("click", tree5Clicked);
    tree6.addEventListener("click", tree6Clicked);

ifelse();
}

function tree1Clicked (){
    console.log("tree1 clicked");
    TreesLeft-=1;
    tree1.classList.remove("tree1S");
}

function tree2Clicked (){
    console.log("tree2 clicked");
    TreesLeft-=1;
    tree2.classList.remove("tree2S");
}

function tree3Clicked (){
    console.log("tree3 clicked");
    TreesLeft-=1;
    tree3.classList.remove("tree3S");
}

function tree4Clicked (){
    console.log("tree4 clicked");
    TreesLeft=TreesLeft-1;
    tree4.classList.remove("tree4S");
}

function tree5Clicked (){
    console.log("tree5 clicked");
    TreesLeft-=1;
    tree5.classList.remove("tree5S");
}

function tree6Clicked (){
    console.log("tree6 clicked");
    TreesLeft-=1;
    tree6.classList.remove("tree6S");
}



function ifelse(){
    if (TreesLeft ==0){
    console.log("it worked");
     allTreesGone();
     }
    else {
    console.log("did not work");
    }
  }


 function allTreesGone (){
   console.log("All trees are gone");
 }

Answer 1

您可以在每个ifelse()功能结束时调用treeXClicked功能，而不是在TreeGoneOnClick功能结束时调用。

Answer 2

在TreesGoneOnClick函数上调用一次的事件侦听器调用ifElse函数。

我假设在进行任何点击之前调用此方法一次，因为这是您注册事件侦听器的地方。每次点击后都应该测试剩下多少棵树，因此应该在听众中进行测试

Answer 3

如果整合回调并在一个代码块中检查所有条件，则会变得更简单。

function treeClicked(num, evt) {
    //evt.target contains a reference to the tree clicked
    //so you don't really need num, but just in case
    console.log("tree" + num + " clicked");
    treesLeft -= 1;
    if (treesLeft <= 0)
        callSomeOtherFunction();
}

如果你真的需要知道被点击的树的索引（即evt是不够的），你可以用bind实现它：

//set the callback value of num and the this reference
//so when this tree is clicked num will equal 1
tree1.addEventListener("click", treeClicked.bind(this, 1));

如何制作if / else语句循环？

3 个答案: