在多個實例上更改文本 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方法。

此外，這可以很容易地變得更加動態，甚至可以為選擇器和多個隱藏/顯示的目標工作。