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

【问题标题】：How make multiple javascript hide/show work on one single page如何使多个javascript隐藏/显示在一个页面上工作
【发布时间】：2015-02-01 14:02:15
【问题描述】：

请您告诉我如何更改此代码，以便用户可以单击第一个阅读我查看糖文本，并单独单击第二个阅读我查看吐司文本。

这让我发疯 - 显示文本有不同的名称，但使用此代码，阅读我的点击都会显示 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>

【问题讨论】：

标签： javascript html show-hide

【解决方案1】：

由于您的 2 个不同的代码共享相同的名称，因此只有第二个被调用（第一个被覆盖）。

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

您的切换方法的唯一变化是我使用参数来获取元素，因此您现在使用 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>

【讨论】：