Question

我创建了一组问题和答案，使用函数循环遍历对象数组，这部分工作正常，问题是我只希望单击问题后显示答案，但是我的 addEventListner不管用。请问有人可以帮忙吗？

$(document).ready(function() {
  $(renderReturns()).appendTo('#Returns');
})

let renderReturns = () => {
  let returnsCard = "";
  for (let i = 0; i < returnContent.length; i++) {
    returnsCard += `<div class="question-container"> <div class="questions"> <a onclick=""><h3>${returnContent[i].question}</h3></a><img src="${returnContent[i].icon}" class="toggle-icon"> </div> <div class="answer" hidden><p>${returnContent[i].answer}</p></div></div>`
  }
  return `<div class="returnsWrapper">${returnsCard}</div>`
}

let questions = document.querySelectorAll('.questions');
let answers = document.querySelectorAll('.answer');
questions.forEach(question => {
  question.addEventListener('click', (e) => {
    console.log("It's alive, it's ALIVE!")
  })
})

let returnContent = [{
    question: "How do I return an item?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    question: "NEW! Instant Returns with InPost Lockers",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    question: "What happens if I miss my delivery?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Our carrier delivers between 9am and 10pm, which may vary depending on the service selected and a signature is required. <br> There are a number of options available if you think you won't be in to sign for your order. We'll pass your e-mail address and mobile number (if provided) to Hermes or DPD and they'll provide you with information about your delivery by e-mail or text message the evening before. <br> Please note deliveries outside of the UK can take anything up to 10 days. Follow your order using the tracking link in your despatch email to check if any delivery attempt has been made.",
  },
  {
    question: "Can I track my delivery?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    question: "Do I pay customs or import charges?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    question: "Can I change my address after ordering?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    question: "Is the site secure?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-content" id="Returns">
  <div class="title-container">
    <p>Returns</p>
  </div>
</div>

Answer 1

要实现此目的，您需要将被点击的 .question 元素与其子元素 .answer 相关联。为此，您可以使用 jQuery 的 next() 方法。

此外，通过更有效地使用 jQuery，可以大大简化从对象数组创建 HTML 的逻辑以及附加事件处理程序的逻辑；如果您已经将它包含在页面中，您也可以使用它。

试试这个：

jQuery($ => {
  let questionHtml = returnContent.map(obj => `<div class="question-container"><div class="questions"> <a onclick=""><h3>${obj.question}</h3></a><img src="${obj.icon}" class="toggle-icon"></div><div class="answer" hidden><p>${obj.answer}</p></div></div>`).join('');
  $('#Returns').append(`<div class="returnsWrapper">${questionHtml}</div>`);

  $('.questions').on('click', e => $(e.currentTarget).next('.answer').toggle());
})

let returnContent = [{
    question: "How do I return an item?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet...",
  }, {
    question: "NEW! Instant Returns with InPost Lockers",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet...",
  }, {
    question: "What happens if I miss my delivery?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Our carrier delivers between 9am and 10pm, which may vary depending on the service selected and a signature is required....",
  }
  // truncated for brevity...
]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-content" id="Returns">
  <div class="title-container">
    <p>Returns</p>
  </div>
</div>

遍历节点列表并单击切换其内容

1 个答案: