How to reuse a function in JavaScript for the same class, specific to the one clicked on?-CodePudding

I would like to simplify my code, to use the same function, for the same class, but with only triggering the one that's being clicked on (changing the text). With plain JavaScript. I got it working now, but I know it can be simpler, and reusable, even if I were to use 100 of the same thing.

Could you help me simplify and improve the below code?

Code:

// Change the title of dropdown to show/hide    
// 1. create function to change text
const changeText = function changeText() {
  if (this.innerHTML == "Show details") {
    this.innerHTML = "Hide details"
  } else {
    this.innerHTML = "Show details"
  }
};

// 2. add click event on element to trigger text change
document.querySelector('summary.priceSummary').onclick = changeText;
document.querySelector('summary.priceSummary2').onclick = changeText;
document.querySelector('summary.priceSummary3').onclick = changeText;

<details>
  <summary >Show details</summary>
  <ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ul>
</details>

<details>
  <summary >Show details</summary>
  <ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ul>
</details>

<details>
  <summary >Show details</summary>
  <ul>
    <li>test</li>
    <li>test</li>
    <li>`enter code here`test</li>
    <li>test</li>
  </ul>
</details>

CodePudding user response：

Give all your elements the same class, then use document.querySelectorAll() and loop over them.

// Change the title of dropdown to show/hide    
// 1. create function to change text
const changeText = function changeText() {
  if (this.innerHTML == "Show details") {
    this.innerHTML = "Hide details"
  } else {
    this.innerHTML = "Show details"
  }
};

// 2. add click event on element to trigger text change
document.querySelectorAll('summary.priceSummary').forEach(el => el.addEventListener("click", changeText));

<details>
  <summary >Show details</summary>
  <ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ul>
</details>

<details>
  <summary >Show details</summary>
  <ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ul>
</details>

<details>
  <summary >Show details</summary>
  <ul>
    <li>test</li>
    <li>test</li>
    <li>`enter code here`test</li>
    <li>test</li>
  </ul>
</details>

CodePudding user response：

Just select all summary elements and iterate over them instead of selecting the priceSummary2 etcs.

for (const summary of document.querySelectorAll('summary')) {
  summary.onclick = () => summary.textContent = summary.textContent =
    'Show details' ? 'Hide details' : 'Show details';
}

If you have other summary elements, then give these a class name in common - eg, call them all priceSummary, and then you can do querySelectorAll('.priceSummary') instead.

Another option is to toggle a class, and have CSS rules show or hide the "Hide details" or "Show details" element appropriately.

for (const summary of document.querySelectorAll('.priceSummary')) {
  summary.addEventListener('click', () => summary.classList.toggle('show'));
}

.priceSummary:not(.show) > :first-child,
.priceSummary.show > :nth-child(2) {
  display: none;
}

<details>
  <summary ><span>Show</span><span>hide</span> details</summary>
  <ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ul>
</details>

<details>
  <summary ><span>Show</span><span>hide</span> details</summary>
  <ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ul>
</details>

<details>
  <summary ><span>Show</span><span>hide</span> details</summary>
  <ul>
    <li>test</li>
    <li>test</li>
    <li>`enter code here`test</li>
    <li>test</li>
  </ul>
</details>