Question

我有一个带有参数的函数，在函数内部，我有if语句。当我尝试执行功能时。它仅在if语句为true时起作用，如果if语句为false则不起作用。

如果我不喜欢使用功能，一切都很好。但是，我想改进自己的代码，而不要重复10次。

function PopUpWithText(popUp_img, popUp_txt, popUp_icon) {
  var hotspotScale = 1;
  if (hotspotScale === 1) {
    popUp_img.setAttribute("scale", "0");
    popUp_txt.setAttribute("scale", "0");
    popUp_icon.setAttribute("scale", "0");
    hotspotScale = 0;
  } else if (hotspotScale === 0) {
    popUp_img.setAttribute("scale", "1");
    popUp_txt.setAttribute("scale", "1");
    popUp_icon.setAttribute("scale", "1");
    hotspotScale = 1;
  }
}

var popUpWithText1 = document.querySelectorAll("#popUp_icon1, #AButton");
for (var i = 0; i < popUpWithText1.length; i++) {
  popUpWithText1[i].addEventListener("click", function() {
    PopUpWithText(
      document.querySelector("#popUp_img1"),
      document.querySelector("#popUp_txt1"),
      document.querySelector("#popUp_icon1")
    );
  });
}

首先，我知道我肯定缺少return。其次，这段代码应该在0和1之间切换小数位。我可以将小数位值更改为0，但随后又不会切换回值1。请帮助

Answer 1

在PopUpWithText内部，您正在设置hotspotScale = 1，因此您的代码将永远不会进入else if分支。您可以将其移动到函数范围之外的全局变量。

Answer 2

如果只想切换元素的可见性，则可以使用visible属性：

function PopUpWithText(popUp_img, popUp_txt, popUp_icon) {
  let visible = popUp_img.getAttribute('visible')
  popUp_img.setAttribute("visible", !visible);
  popUp_txt.setAttribute("visible", !visible);
  popUp_icon.setAttribute("visible", !visible);
}

为了使事情变得容易，您可以将元素扔到父实体中：

<a-entity id="parent">
  <!-- All three elements --!>
</a-entity>

，如果要更改比例，可以进行类似的切换：

function PopUpWithText(popUp_parent) {
  let scale = popUp_parent.getAttribute('scale')
  scale = scale.x === "1" ? "0" : "1" 
  popUp_parent.setAttribute("scale", scale);
}

就像我在this小提琴中所做的那样。

条件语句中的返回函数值

2 个答案: