Question

我有一个javscript show / hide脚本，它以分区ID为参数。我正在建立一个网站（在同一页面上），该文件多次出现。显示/隐藏代码的调用方式如下：

<p class="MsoNormal"><a href="javascript:switchid('19940530_id');">ClickMe</a> to see me (p element). Note arrow displayed</p>
<div style="display: none;  padding-left: 10px" id="19940530_id">
  <p class="MsoNormal">Now you see me (p element).</p>
</div>

问题是要执行此操作并具有正确的div显示/隐藏，ID必须是唯一的，需要多个相同的文件，仅要下载的ID有所不同。这会导致页面加载缓慢。

我正在寻找一种方法来动态分配或确定唯一的ID（在加载时？）以传递给此脚本。

显示/隐藏代码在这里：https://www.rossco.org/include/scripts/manage_showhide.js

并且，这里有一个演示（带有“愿望”更改列表）：https://www.rossco.org/showhide.html

建议？

谢谢；比尔

Answer 1

您应该使用带有动态ID的setAttribute('id', ...)，然后找到一种可以切换元素ID的方式-我将使用data- attributes：

var container = document.querySelector('#container');
var idsNum = 0;

document.querySelector('#addElement').addEventListener('click', function() {
  var parent = document.createElement('div');
  
  var uniqueId = 'id' + (idsNum++);
  
  var paragraph = document.createElement('p');
  paragraph.textContent = 'Some text.'; // Use innerText for old browsers
  paragraph.setAttribute('id', uniqueId);
  
  var toggleBtn = document.createElement('button');
  toggleBtn.textContent = 'Toggle Paragraph Visiblity'; // Use innerText for old browsers
  toggleBtn.setAttribute('data-id', uniqueId);
  toggleBtn.addEventListener('click', handleClick, false);
  
  parent.appendChild(paragraph);
  parent.appendChild(toggleBtn);
  
  container.appendChild(parent);
}, false);

function handleClick(e) {
  e = e || window.event;
  
  var toggledElement = document.getElementById(e.target.getAttribute('data-id'));
  toggledElement.style.display = 'none' === toggledElement.style.display ? '' : 'none';
}

<button id="addElement">Add Element</button>

<div id="container"></div>

但是，如果任何段落和按钮具有唯一的父级，则不需要动态生成ID，而只需在点击的按钮的父级内部切换p标签即可（我添加了一个所有p标签的类，因为父级中可能还有其他段落）

var container = document.querySelector('#container');

document.querySelector('#addElement').addEventListener('click', function() {
  var parent = document.createElement('div');
  
  var paragraph = document.createElement('p');
  paragraph.textContent = 'Some text.'; // Use innerText for old browsers
  paragraph.className = 'paragraph';
  
  var toggleBtn = document.createElement('button');
  toggleBtn.textContent = 'Toggle Paragraph Visiblity'; // Use innerText for old browsers
  toggleBtn.addEventListener('click', handleClick, false);
  
  parent.appendChild(paragraph);
  parent.appendChild(toggleBtn);
  
  container.appendChild(parent);
}, false);

function handleClick(e) {
  e = e || window.event;
  
  var toggledElement = e.target.parentNode.querySelector('.paragraph');
  toggledElement.style.display = 'none' === toggledElement.style.display ? '' : 'none';
}

<button id="addElement">Add Element</button>

<div id="container"></div>

Answer 2

事实证明，尝试使Id具有唯一性过于复杂，并且使用更现代的jquery，CSS，OO方法要好得多，因为我的网站已经使用了它。另外，在处理许多显示/隐藏div时，具有用于显示/隐藏的按钮会使UI变得非常难看。我希望能够单击文本，并在显示部分或隐藏部分方面具有明显的提示性。

演示在这里：https://www.rossco.org/showhide-new.html

代码：

<html>
<head>
<title>Show / Hide Demo</title>
<script src="https://www.rossco.org/browse.php?Frameworks/jquery/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.rossco.org/include/css/ms_office.css">
<style>
.toggle {
 display: block;
}
.toggle p {
 color: blue;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
  // Initialize all toggle div arrows hidden
  var divs = document.getElementsByClassName("toggle");
  var i;
  for (i = 0; i < divs.length; i++) {
    var oldHTML = divs[i].firstElementChild.innerHTML;
    divs[i].firstElementChild.innerHTML = "<img src=\"/images/plus.gif\" alt=\"hide section\" />" + oldHTML;
  }
  // Start all showhide divs with display: none (hidden)
  divs = document.getElementsByClassName("showhide");
  for (i = 0; i < divs.length; i++) {
    divs[i].style.display = "none";
  }
  $(".toggle").on("click", function(e)
  {
    var oldHTML = e.target.innerHTML;
    var newHTML = "";
    // Image tags already created by page load, need to toggle
    if ( e.currentTarget.nextElementSibling.style.display == "none" )
    {
       e.currentTarget.nextElementSibling.style.display = "";
       newHTML = oldHTML.replace("plus.gif", "minus.gif");
    } else {
       e.currentTarget.nextElementSibling.style.display = "none";
       newHTML = oldHTML.replace("minus.gif", "plus.gif");
    }
    e.target.innerHTML = newHTML;
  });
});
</script>
</head>
<body>
  <div class="toggle">
    <p class="MsoNormal">Click to see me.</p>
  </div>
  <div class="showhide">
      <p class="MsoNormal">Now you see me (p element).</p>
      <p class="MsoNormal">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>

  <div class="toggle">
      <p class="MsoNormal">Click to see me (li element).</p>
  </div>
  <div class="showhide">
      <li class="MsoNormal">Now you see me (li element).</li>
      <li class="MsoNormal">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</body>
</html>

要使用此代码：

1-将jquery脚本src更改为标准jquery网址

2-将MsoNormal中的p和li类替换为您自己的类。

3-（可选）将CSS和javascript分离出来，并与您的网站CSS和javascript合并

HTML很简单：

<div class="toggle">
  <p class="whatever">Text to click to see.</p>
</div>
<div class="showhide">
  <p class="whatever">Text to show / hide.</p>
  ... any other valid html content
</div>

由于javascript只是一种偶尔的能力，因此在我承诺更改数百个文件之前，请先对浏览器或其他问题给予意见/建议。

有关；比尔

javascript显示隐藏分区下载内容

2 个答案: