javascript - 为什么我的 JavaScript 不能工作!？它正在选择 ID 但不会应用显示更改

Question

在开始学习之前，我知道我应该学习 jQuery，但我还没有学习，我想先学习原始 JavaScript!好吧，主要是。有人可以在不使用 jQuery 的情况下帮助我，只是为了理解，谢谢!:

您好，我是 JavaScript 的新手，开始学习它没多久，您可以从第一个用于导航的代码(它有效，所以我要离开它)看到。

但是，我的问题出现在第二段代码上，我在观看有关事件监听器等的视频后尝试从不同的 Angular 尝试一些东西，我写的所有内容对我来说都是有意义的，我正在逐步完成, 它正在选择所有正确的东西，但它仍然没有显示所需的结果!!

当您单击 CSS 时，我希望它显示 ID 为“cs”的 div，对于 HTML 和 JavaScript 也是如此。

我真的不太了解 JavaScript，无法自己解决这个问题，我想不出有什么办法可以帮助解决这个问题!

谁来救救我，我的脑子快疯了，我想 sleep 了!

这是代码，这是 JS fiddle :https://jsfiddle.net/pmj26o9p/2/

var htm = document.getElementById('htm');
var css = document.getElementById('css');
var js = document.getElementById('js');

htm.addEventListener("click", contentShow);
css.addEventListener("click", contentShow);
js.addEventListener("click", contentShow);

function contentShow() {
  var whichOne = this.attributes["data-id"].value;
  var switcheroo = document.getElementById(whichOne);

switcheroo.onclick = function() {

  if (switcheroo.style.display === "none") {
    switcheroo.style.display = "";
  } else {
    switcheroo.style.display = "none";
  }

}

编辑:再次阅读代码时，我认为即使它有效也不会实现我想要的。这将让我显示和隐藏我正在单击的内容吗？

我想显示被点击的一个，然后隐藏/应用 display:none 到所有其他未被点击的。

Answer 1

我下面的示例将根据您的编辑评论显示所选 block 并隐藏其他 block 。

var htm = document.getElementById('htm');
var css = document.getElementById('css');
var js = document.getElementById('js');

function contentShow(el) {
  var whichOne = el.attributes["data-id"].value;
  var switcheroo = document.getElementById(whichOne);

  // show selected block, hide the others
  switch (switcheroo) {
    case htm:
      htm.style.display = "block";
      css.style.display = "none";
      js.style.display = "none";
      break;
    case js:
      htm.style.display = "none";
      css.style.display = "none";
      js.style.display = "block";
      break;
    case css:
      htm.style.display = "none";
      css.style.display = "block";
      js.style.display = "none";
      break;
  }
}

<span data-id="htm" onClick="contentShow(this)" style="margin-right:10px;color:red; cursor:pointer">Click to show the HTML Block</span>
<span data-id="css" onClick="contentShow(this)" style="margin-right:10px;color:green; cursor:pointer">Click to show the CSS Block</span>
<span data-id="js" onClick="contentShow(this)" style="margin-right:10px;color:blue; cursor:pointer">Click to show the JS Block</span>
<br/>
<br/>
<div id="htm">Some HTML info here</div>
<div id="css" style="display:none">Some CSS info here</div>
<div id="js" style="display:none">Some JavaScript info here</div>