javascript - 显示/隐藏内容列表中的文本

Question

我正在尝试保留一个静态的内容列表（大约 10 个项目符号），当单击每个不同的标题/标题时，它将显示和隐藏文本。我可以到达那里，但我认为我正在走很长的路，因为我不熟悉 JS。

想知道是否有人可以向我展示一个更好/更简单的方法来做到这一点，因为我的 JS 看起来非常愚蠢，我不得不为我的方法重复很多次。

旁注：出于某种原因，我需要单击标题/标题两次才能使 JS 工作

function pointOne() {
  var x = document.getElementById("contentOne");
  var y = document.getElementById("firstText");
  var z = document.getElementById("contentTwo");
  if (x.style.display === "none") {
    x.style.display = "block";
    y.style.display = "none";
    z.style.display = "none";
  } else {
    x.style.display = "none";
    y.style.display = "block";
    z.style.display = "none";
  }
}

function pointTwo() {
    var x = document.getElementById("contentTwo");
    var y = document.getElementById("firstText");
    var z = document.getElementById("contentOne");
    if (x.style.display === "none") {
      x.style.display = "block";
      y.style.display = "none";
      z.style.display = "none";
    } else {
      x.style.display = "none";
      y.style.display = "none";
      z.style.display = "none";
    }
  }

#contentOne, #contentTwo {
  display: none;
}

    <div style="background-color: #eee; padding: 10px;">
      <div id="firstText">
        <p>A welcoming text blurb here</p>
      </div>
      <div id="contentOne">
        <p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">1. Title number one</span></strong></span></p><p>Text blurb of title 1
        </p>
      </div>
      <div id="contentTwo">
        <p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">2. Title number two</span></strong></span></p><p>Text blurb of title 2
        </p>
      </div>
    </div>
    
    
    <div>
          <p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;color: #ccc">Table Of Contents</span></strong></span></p><p>
        <a href="#point1" onclick="pointOne()">1. Title 1 to click</a><br><br>
        <a href="#point2" onclick="pointTwo()">2. Title 2 to click</a></p>
    </div>

标签： javascripthtmlcss

Answer 1

您可以通过传递元素本身的参数来创建一个适用于所有点的函数。
这应该使添加新元素变得更加容易，因为您不必编写任何新函数

在按钮中你可以添加一个 data-contentId 标签来设置内容 id 并在 js 中访问它：

function point(button) {
  //var x = document.getElementById("contentOne");
  //var y = document.getElementById("firstText");
  //var z = document.getElementById("contentTwo"); 
  const content = document.getElementById(button.dataset.contentid);
  //console.log(content.style);
  const display = getComputedStyle(content)["display"];
  const container = button.parentElement.children;
  const firstText = document.getElementById("firstText");
  let contents
  for (let i = 0; i < container.length; i++) {
  contents = container[i].dataset.contentid;
  if(contents) /*in case its a br element*/  document.getElementById(container[i].dataset.contentid).style.display="none";
}
  if(display === "none"){
    content.style.display = "block";
    firstText.style.display = "none";
  }else{
  content.style.display = "none";
  firstText.style.display = "block";
  }
}

#contentOne, #contentTwo {
  display: none;
}
.content {
  display: none;
}

    <div style="background-color: #eee; padding: 10px;">
      <div id="firstText">
        <p>A welcoming text blurb here</p>
      </div>
      <div id="contentOne" class="content">
        <p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">1. Title number one</span></strong></span></p><p>Text blurb of title 1
        </p>
      </div>
      <div id="contentTwo"class="content">
        <p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">2. Title number two</span></strong></span></p><p>Text blurb of title 2
        </p>
      </div>
        <div id="content3"class="content">
        <p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">An example</span></strong></span></p><p>Text blurb of title 3
        </p>
      </div>      
      <div id="content4"class="content">
        <p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">It works</span></strong></span></p><p>Yh it does
        </p>
      </div>      
      <div id="content5"class="content">
        <p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">Another one</span></strong></span></p><p>Epic
        </p>
      </div>      
      <div id="content6"class="content">
        <p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">Its much easier instead of writing separate functiones</span></strong></span></p><p>Ofc it is
        </p>
      </div>
    </div>
    
    
    <div>
          <p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;color: #ccc">Table Of Contents</span></strong></span></p>
        <div>
        <a data-contentId="contentOne" href="#point1" onclick="point(this)">1. Title 1 to click</a><br><br>
        <a data-contentId="contentTwo" href="#point2" onclick="point(this)">2. Title 2 to click</a><br><br>
        <a data-contentId="content3" href="#point2" onclick="point(this)">3. Title 2 to click</a><br><br>
        <a data-contentId="content4" href="#point2" onclick="point(this)">4. Title 2 to click</a><br><br>
        <a data-contentId="content5" href="#point2" onclick="point(this)">5. Title 2 to click</a><br><br>
        <a data-contentId="content6" href="#point2" onclick="point(this)">6. Title 2 to click</a>
        </div>
    </div>