在多个实例上更改文本 onclick

Question

我正在使用 javascript 来显示/隐藏内容。 我在每个内容部分下都有一个链接。 当用户单击链接 [show] 时，它会显示所有内容。 当用户再次单击链接时，它会隐藏内容。 我希望链接文本从显示更改为隐藏，并在单击时隐藏以显示。 这是我想要做的一个例子。

我已经设法解决了显示/隐藏部分，但是我在更改链接文本时遇到了问题。 它仅适用于内容 1，不适用于其他部分。 我认为这是因为querySelectorAll("button")[0]找到 a.toggle 的所有实例并从数组[0]选择第一个出现。 我不知道如何将 javascript 应用于所有实例。 谢谢。

HTML

<div>
  <h1>Title</h1>      
  <div>Content - Show</div>
  <div id="section" style="display:none;">
    <div>Content - Hide</div>
  </div>
  <div><a class="toggle" href="javascript:divHideShow('section');" data-text-swap="Hide">Show</a></div>
</div>

<div>
  <h1>Title 2</h1>      
  <div>Content 2 - Show</div>
  <div id="section2" style="display:none;">
    <div>Content 2 - Hide</div>
  </div>
  <div><a class="toggle" href="javascript:divHideShow('section2');" data-text-swap="Hide">Show</a></div>
</div>


<div>
  <h1>Title 3</h1>      
  <div>Content 3 - Show</div>
  <div id="section3" style="display:none;">
    <div>Content 3 - Hide</div>
  </div>
  <div><a class="toggle" href="javascript:divHideShow('section3');" data-text-swap="Hide">Show</a></div>
</div>

JS

 var toggle = document.querySelectorAll("a.toggle")[0];
toggle.addEventListener('click', function() {
  if (toggle.getAttribute("data-text-swap") == toggle.innerHTML) {
    toggle.innerHTML = toggle.getAttribute("data-text-original");
  } else {
    toggle.setAttribute("data-text-original", toggle.innerHTML);
    toggle.innerHTML = toggle.getAttribute("data-text-swap");
  }
}, false);

function divHideShow(divToHideOrShow) {
  var div = document.getElementById(divToHideOrShow);
    if (div.style.display == "none") {
      div.style.display = "block";
    }
    else {
      div.style.display = "none";
    }
  }     

Answer 1

最简单的方法是将侦听器绑定到要显示/隐藏的元素的容器元素。 然后在侦听器内部检查它是否是正确的目标。 然后交换 textContent 并寻找一个目标来更改display样式。

 var ToggleContent = (function(doc) { var targetMap = {}, initialized; function init(containerSelector) { // make sure the plugin is only initialized once if(initialized) return; // find container element var container = document.querySelector(containerSelector) || doc.body; // bind 'click'-listener to container element container.addEventListener('click', function(event) { // declare target as the clicked element var target = event.target; // if clicked element has the 'data-toggle-text' attribute if (target.dataset.toggleText) { // swap the text contents var tmp = target.textContent; target.textContent = target.dataset.toggleText; target.dataset.toggleText = tmp; // if clicked element has the 'data-toggle-for' attribute if (target.dataset.toggleFor) { // lookup target to toggle visibility target = targetMap[target.dataset.toggleFor]; // if such a target exists if(target) { // toggle display property to hide/show element target.style.display = target.style.display ? null : 'none'; } } } }); update(); initialized = true; } function update() { // find all elements with the 'data-toggle-target' attribute var elements = [].slice.call(document.querySelectorAll('[data-toggle-target]')); // save the result into a simple object map to lookup elements later on targetMap = elements.reduce(function(o, el) { o[el.dataset.toggleTarget] = el; return o; }, {}); } // return public methods return { init: init, update: update }; })(document); ToggleContent.init();

 body { font-family: sans-serif; } a { font-weight: bold; cursor: pointer; }

 <div> <h1>Title</h1> <div>Content - Show</div> <div data-toggle-target="content1" style="display:none;"> <div>Content - Hide</div> </div> <div><a class="toggle" data-toggle-for="content1" data-toggle-text="Hide">Show</a></div> </div> <div> <h1>Title 2</h1> <div>Content 2 - Show</div> <div data-toggle-target="content2" style="display:none;"> <div>Content 2 - Hide</div> </div> <div><a class="toggle" data-toggle-for="content2" data-toggle-text="Hide">Show</a></div> </div> <div> <h1>Title 3</h1> <div>Content 3 - Show</div> <div data-toggle-target="content3" style="display:none;"> <div>Content 3 - Hide</div> </div> <div><a class="toggle" data-toggle-for="content3" data-toggle-text="Hide">Show</a></div> </div>

编辑：如果您动态添加一些元素，只需调用ToggleContent上的update方法。

此外，这可以很容易地变得更加动态，甚至可以为选择器和多个隐藏/显示的目标工作。