javascript - 在多个实例中更改文本 onclick

Question

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

我已经设法解决了显示/隐藏部分，但我在更改链接文本时遇到了问题。它仅适用于内容 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

执行此操作的最简单方法是将监听器绑定(bind)到要显示/隐藏的元素的容器元素。然后在监听器内部检查它是否是正确的目标。然后交换 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 方法即可。

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