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

How make multiple javascript hide/show work on one single page

本文关键字：一个 工作 javascript 何使多 隐藏 显示      更新时间：2023-09-26

请您告诉我如何更改此代码，以便用户可以单击第一个自述我仅查看糖文本，并分别单击第二个自读我以查看 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>

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

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

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

相关文章：