javascript - 如何切换单个图像？

Question

问题是当我点击问题时，所有问题的加号和减号图标都会改变，我只希望我点击的问题旁边的图标改变。任何人都可以帮忙吗？

document.addEventListener('DOMContentLoaded', function() {
const questions = document.querySelectorAll('.questions');
const toggleIcons = document.querySelectorAll('.toggle-icon');


for (const question of questions) {
    question.addEventListener('click', () =>{
        const answerToQuestion = question.nextElementSibling;
        answerToQuestion.toggleAttribute('hidden');
        for(const toggleIcon of toggleIcons) {
            if(toggleIcon.src == 'https://via.placeholder.com/50x50'){
                toggleIcon.setAttribute('src', 'https://via.placeholder.com/200x200') 
            } else {
                toggleIcon.setAttribute('src', 'https://via.placeholder.com/50x50')
            }
        } 
    })
}



});

<div class='question-container'>
  <div class="questions">
    <h3>Can I return my order?</h3>
    <img src="https://via.placeholder.com/50x50" alt="minus-sign" class="toggle-icon" onclick="openQuestion()">
  </div>
  <div class="answer" id="default-content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!
      Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,</p>

  </div>
</div>
<div class="question-container">
  <div class="questions">
    <h3>How much will it cost to ship my item?</h3>
    <img src="https://via.placeholder.com/50x50" alt="minus-sign" class="toggle-icon" onclick="openQuestion()">
  </div>
  <div class="answer">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!
      Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,</p>

  </div>
</div>

标签： javascript

Answer 1

这里有一个完美的解决方案

<div class='question-container'>
    <div class="questions">
      <h3>Can I return my order?</h3>
      <img src="https://via.placeholder.com/50x50" alt="minus-sign" class="toggle-icon" onclick="openQuestion(this)">
    </div>
    <div class="answer" id="default-content">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!
        Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,</p>
  
    </div>
  </div>
  <div class="question-container">
    <div class="questions">
      <h3>How much will it cost to ship my item?</h3>
      <img src="https://via.placeholder.com/50x50" alt="minus-sign" class="toggle-icon" onclick="openQuestion(this)">
    </div>
    <div class="answer">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!
        Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,</p>
  
    </div>
</div>

这是您需要的脚本

function openQuestion (e) {
    if(e.src == 'https://via.placeholder.com/50x50'){
        e.setAttribute('src', 'https://via.placeholder.com/200x200') 
    } else {
        e.setAttribute('src', 'https://via.placeholder.com/50x50')
    }
    e.parentNode.nextElementSibling.toggleAttribute('hidden')
}