[在运行功能之前已单击检查元素

Question

我有一个用户在关注任务中选择（单击）的多个元素。目前，我有一些代码，其中的元素在单击时变为红色。完成后，用户将单击“下一步”以查看其他任务。至关重要的是，他们必须在继续之前进行选择。

因此，我需要检查用户是否已选择元素之一。

[如果某人在单击“下一步”之前尚未选择元素之一，那么我会写一条错误消息。但是首先，我在检查是否首先单击某个元素时遇到了麻烦。最好，我还将检查哪个元素是否被单击。

提前感谢您的帮助！

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <style media="screen">
    .buttons {
      width: 150px;
      height: 50px;
      border: solid 2px white;
      text-align: center;
      color: black;
      cursor: pointer;
    }

    #buttonGallery {
      margin: 10px;
      padding: 10px;
      border: solid 2px black;
      width: 155px;
    }

    #button_1 {
      background-color: #ffcc66;
    }

    #button_2 {
      background-color: #99ffff;
    }

    .buttons:hover {
      background-color: red !important;
      border: solid 3px black !important;
    }

    .selected {
      background-color: red !important;
      border: solid 3px black !important;
    }

    #next {
      background-color: gray;
      margin: 10px;
      width: 150px;
      height: 50px;
      border: solid 2px white;
      text-align: center;
      color: black;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <div id="buttonGallery">
    <div id="button_1" class="buttons">
      <p>button_1</p>
    </div>
    <div id="button_2" class="buttons">
      <p>button_2</p>
    </div>
  </div>
  <div id="next">
    <p>next</p>
  </div>

  <script type="text/javascript">
    $('.buttons').click(function() {
      $('.buttons').removeClass("selected");
      $(this).toggleClass("selected");
    });

    $('#next').click(function() {
      // check that one of the elements has been clicked
      // if an element has not been clicked, then show error message
      // console.log(which element was clicked)
      $('#buttonGallery').hide();
      $('#next').hide();
    });
  </script>
</body>

</html>

Answer 1

另一答案