Question

编辑我的意思是，我怎么能添加第三个 else if 语句，它会在第三次点击时触发。

基本上它会在第一次、第二次和第三次点击时打开并隐藏不同的元素。

所以我想再添加一个函数，使这个 onclick 事件总共有 3 个函数，该函数根据您单击按钮的次数而变化。我只是不确定如何添加第三个功能。

        <div class="base" id="base">
        <img src="img/base.svg">
    </div>

    <div class="base one" id="one">
        <img src="img/one.svg">
    </div>


    <div class="base two" id="two">
        <img src="img/two.svg">
    </div>
    <div class="base three" id="three">
        <img src="img/three.svg">
    </div>
    <button class="test" id="test">btn</button>




var action = 1;
test.onclick = function viewSomething() {
if (action == 1) {
    base.style.display = "none";
    one.style.display = "block";
    action = 2;
    console.log(tets)
} else {
    one.style.display = "none";
    two.style.display = "block";
    action = 1;
}

}

Answer 1

我不确定您所说的第三个函数是什么意思，因为我只能看到 viewSomething，但是您可以将 if else 块添加到您的 {{1} } 声明：

if

Answer 2

如果你真的想要三个不同的函数（你目前有一个函数和两个 if 语句），你需要使用 addEventListener:

function clickOne() {
  console.log("first!");
}
function clickTwo() {
  console.log("second!");
}
function clickThree() {
  console.log("third!");
}
var test = document.querySelector("#test");
test.addEventListener("click", clickOne);
setTimeout(() => {
  test.addEventListener("click", clickTwo);
}, 2000);
setTimeout(() => {
  test.addEventListener("click", clickThree);
}, 5000);

<button class="test" id="test">Click</button>

Answer 3

你已经有了基本的设置，你只需要扩展它：

var action = 1;
test.onclick = function viewSomething() {
if (action == 1) {
    base.style.display = "none";
    one.style.display = "block";
    action = 2;
    console.log(tets)
} else if (action === 2) {
   // ...
   action = 3;
} else if (action === 3) {
    one.style.display = "none";
    two.style.display = "block";
    action = 1;
}

话虽如此，如果你总是从一个“动作”到另一个“动作”按顺序进行，你可以考虑将每个“动作”移动到一个单独的函数中，将所有这些函数存储到一个数组中，并让点击处理程序简单地推进索引:

const actions = [
  function(event) {
    base.style.display = "none";
    one.style.display = "block";
  },
  function(event) {
    one.style.display = "none";
    two.style.display = "block";
  },
  function(event) {
    // ...
  },
];

let actionIndex = 0;
test.onclick = function viewSomething(event) {
  actions[actionIndex](event);
  actionIndex = (actionIndex + 1) % actions.length;
};

该解决方案的优势在于您将操作“控制”与操作本身分离，并且您可以更轻松地添加和重新排列其他操作。

如何向按钮添加第三个 javascript else if 语句？

3 个答案: