Question

所以我正在开发一个包含一些功能的小项目，但并不是每个人都需要大部分这些功能，因此我在加载页面时尝试自动隐藏它们，并在点击按钮时显示它们。

但我无法让“红色空间：”文字发挥作用。 “Happening：”应该在页面加载时出现，但仍然可以在“Red Space：”与其相反的情况下进行转换。如何在单击按钮时看到“红色空间：”文本？

我仍然是Javascript的新手（您可以通过查看代码看到......）所以我感谢一些更适合初学者的解释，提前感谢

这是我的HTML，CSS和Javascript：

function displayOnOff(scounter) {
  var displayNone = document.getElementById('name').name
  var visible = "display: none;"
  if (displayNone == 1) {
    document.getElementById(scounter + 'Explanation').style = "display: none;"
    document.getElementById('name').name = 2
  } else if (displayNone == 2) {
    document.getElementById(scounter + 'Explanation').style = " "
    document.getElementById('name').name = 1
  }
}

.obscure {
  display: none;
}

.inputText {
  margin-left: 70px;
}

.changesButton {
  margin-right: 40px;
}

<div class="playerExplanation">
  <b class="inputText" id="happeningExplanation"> Happening:</b>
  <div id="redSpaceExplanation"><b class="inputText obscure"> Red Spaces: </b></div>
</div>

<div id="changesBorderTop"></div>
<div class="marioPartyChanges">
  <button class="changesButton" onclick="displayOnOff('happening')"> Happening on/off </button>

  <button class="changesButton" onclick="displayOnOff('redSpace')"> RedSpace on/off </button>
</div>
<img name="1" style="display: none;" id="name">

Answer 1

实际上存在一些阻止“红色空间：”出现问题的问题。

第一个是if (displayNone == 1)行将document.getElementById('name').name（字符串“1”或“2”）的结果与数字（1或2）进行比较。 name属性始终返回一个字符串。如果不将数字转换为另一个，则无法比较数字和字符串。为此，我们使用parseInt()

var displayNone = parseInt(document.getElementById('name').name);

现在displayNone是一个数字，if (displayNone == 1)可以评估为真。

下一个问题是包含'Red Spaces：'的元素具有CSS类.obscure。该类定义为.obscure { display: none; }。这意味着除非display样式以某种方式覆盖，否则该元素将被隐藏。您的功能旨在内联（在style属性中），但是当您从样式属性中删除display: none;时，您可以通过设置.style = " "来执行此操作。这意味着.obscure不再被任何内联样式覆盖，其样式现在将应用于该元素。

建议：请勿使用图片存储有关应用程序状态的信息。最好使用布尔变量或“隐藏”类型的<input>。

运行以下代码段以查看操作中的更改。我删除了.obscure类，整理了代码，并将<img>元素换成了变量。

var displayingNone = false;

function displayOnOff(scounter) {  
  var explanation = document.getElementById(scounter + 'Explanation');
  var display = document.getElementById('name');

  if (displayingNone === true) {
    explanation.style = "display: none;";
    displayingNone = false;
  } else if (displayingNone === false) {
    explanation.style = " ";
    displayingNone = true;
  }
}

.inputText {
  margin-left: 70px;
}

.changesButton {
  margin-right: 40px;
}

<div class="playerExplanation">
  <div id="happeningExplanation"><b class="inputText"> Happening: </b></div>
  <div id="redSpaceExplanation" style="display:none;"><b class="inputText"> Red Spaces: </b></div>
</div>

<div class="marioPartyChanges">
  <button class="changesButton" onclick="displayOnOff('happening')"> Happening on/off </button>
  <button class="changesButton" onclick="displayOnOff('redSpace')"> RedSpace on/off </button>
</div>

注意您会注意到，有时您必须单击两次按钮才能切换相关文本的可见性。这是因为只使用一个变量来跟踪两个元素的可见性。一个元素可能处于另一个元素的相反状态。单击按钮一次后，它们现在处于相同状态。下一次单击将产生所需的结果。

通过按下按钮自动隐藏文本和显示

1 个答案: