Question

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

这让我很生气 - 显示文字有不同的名字，但是使用这段代码，两个读取点击都会显示吐司评论。

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

<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

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

使用参数使这项工作更容易，我在你的切换函数中添加了一个发送者和一个目标，然后你可以使用发送者（被点击的元素）和目标（应该使用的元素）隐藏或显示）

你的切换方法中唯一的变化就是我使用参数来获取元素，所以你现在正在使用1＆＃34;代码＆＃34;两次点击;）

＆＃13;

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";
  }
}

＆＃13;

<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>

＆＃13;

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

1 个答案: