如何为一组按钮使用唯一标识符？

Question

我已将我的问题分解为简单的问题。来宾可以 post 提问，主持人可以回答。当主持人回答问题时，每个问题都有一个带有提交答案按钮的文本字段。对于主机，在给定时间页面上有 x 数量的按钮，具体取决于访客 posts.I 尝试使用确认模式定位每个提交答案按钮（具有相同标识符）的问题数量。我已经成功定位到第一个按钮，但出于某种原因，所有其他具有相同标识符的按钮都无法定位。我还尝试通过按钮进行 for 循环，并基本上围绕甜蜜警报 Javascript 包装一个 for 循环，但无济于事。 Here 是我试过的。感谢任何帮助。

$(document).ready(function() {
  const btnSubmit = document.querySelector('.q_a');
  btnSubmit.addEventListener('click', function(e) {
    console.log(this.id);
    e.preventDefault();
    swal({
        title: 'Confirm',
        text: 'Your question/answer will be publicly visible - it is not a private message. Are you sure you want to proceed?',
        buttons: [
          'No',
          'Yes, I am sure'
        ]
      })
      .then((isConfirm) => {
        if (isConfirm) {
          swal("Confirming...", {
            buttons: false,
          });
          btnSubmit.submit();
        } else {
          return null;
        }
      })
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled</title>
  <meta name="description" content="This is an example of a meta description.">
  <link rel="stylesheet" type="text/css" href="theme.css">
</head>

<body>
  <input type="submit" name="commit" value="Submit Answer" class="q_a btn btn-success" id="q_a">
  <input type="submit" name="commit" value="Submit Answer" class="q_a btn btn-success" id="q_a">
</body>

</html>

Answer 1

我认为你应该使用 document.querySelectorAll('.q_a')而不是 document.querySelector('.q_a')，然后使用for of循环每个目标来绑定事件。querySelector只是return第一个匹配 dom。就像：

    const btnSubmits = document.querySelectorAll('.q_a');
    for(btn of btnSubmits){
     btn.addEventListener('click', function(e){
      ...
     })
   }

Answer 2

无需循环所有元素即可解决此问题的一种方法是使用 jQuery 添加事件侦听器。为此，请替换您的

btnSubmit.addEventListener('click', function(e) {

和

$('input.q_a').on('click', function(e){

如何为一组按钮使用唯一标识符？

How to use a unique identifier for a set of buttons?

javascript

sweetalert