javascript - 如何使多个 javascript 隐藏/显示在一个页面上工作

Question

请告诉我如何更改此代码，以便用户可以单击第一个自述仅查看糖文本，并单独单击第二个自述以查看 toast 文本。

这让我发疯 - 显示文本有不同的名称，但使用此代码，两次阅读我的点击都会显示 toast 评论。

我是一个非技术人员，没有代码知识，所以请用简单的语言回复!

<p><script language="javascript"> 
function toggle() {
 var ele = document.getElementById("sugar");
 var text = document.getElementById("displayTextsugar");
 if(ele.style.display == "block") {
      ele.style.display = "none";
  text.innerHTML = "read more";
   }
 else {
  ele.style.display = "block";
  text.innerHTML = "hide";
 }
} 
</script>   <a href="javascript:toggle();" id="displayTextsugar">read sugar more</a> &lt;== click Here</p>
<p>&nbsp;</p>
<div style="display: none" id="sugar">
<h1>Sugar in my tea but none in coffee please</h1>
</div>
<script language="javascript"> 
function toggle() {
 var ele = document.getElementById("toast");
 var text = document.getElementById("displayTexttoast");
 if(ele.style.display == "block") {
      ele.style.display = "none";
  text.innerHTML = "read more";
   }
 else {
  ele.style.display = "block";
  text.innerHTML = "hide";
 }
} 
</script>
<p><a href="javascript:toggle();" id="displayTexttoast">read toast more</a> &lt;== click Here</p>
<div style="display: none" id="toast">
<h1>brown toast with marmite please</h1>
</div>

Answer 1

由于您的两个不同的代码共享相同的名称，因此仅调用第二个代码(第一个代码被覆盖)。

使用参数来完成这项工作可能会更容易，我在切换函数中添加了一个发送者和一个目标，然后您可以将其与发送者(正在单击的元素)和目标(应该单击的元素)一起使用隐藏或显示)

切换方法中唯一的变化是我使用参数来获取元素，因此您现在两次点击都使用 1 个“代码”;)

function toggle(sender, target) {
  var ele = document.getElementById(target);
  var text = sender;
  if (ele.style.display == "block") {
    ele.style.display = "none";
    text.innerHTML = "read more";
  } else {
    ele.style.display = "block";
    text.innerHTML = "hide";
  }
}

<p><a href="#" onclick="javascript:toggle(this, 'sugar');" id="displayTextsugar">read sugar more</a> &lt;== click Here</p>
<p>&nbsp;</p>
<div style="display: none" id="sugar">
  <h1>Sugar in my tea but none in coffee please</h1>
</div>
<p><a href="#" onclick="javascript:toggle(this, 'toast');" id="displayTexttoast">read toast more</a> &lt;== click Here</p>
<div style="display: none" id="toast">
  <h1>brown toast with marmite please</h1>
</div>