Question

我想选择3个众议院并使用Javascript将其发送到JSON数组中。这样我就可以将其发送给模式确认。如果我错过了任何内容，请参见下面的代码。

jQuery("#president .btn").click(function() {
  jQuery("#president .btn").removeClass('active');
  jQuery("#president .btn").attr('value', 'Vote');
  jQuery(this).toggleClass('active');
  $(this).attr('value', "Chosen");
});

jQuery("#vice_president .btn").click(function() {
  jQuery("#vice_president .btn").removeClass('active');
  jQuery("#vice_president .btn").attr('value', 'Vote');
  jQuery(this).toggleClass('active');
  $(this).attr('value', "Chosen");
});
jQuery("#house_of_representatives .btn").click(function() {

  jQuery(this).toggleClass('active');
  $(this).attr('value', "Chosen");

  if ($(this).hasClass(".active")) {
    jQuery(this).removeClass("active");
    jQuery(this).attr('value', 'Vote');
  }


  if ($("#house_of_representatives .btn.active").length > 3) {
    alert("3 only");
    jQuery(this).removeClass("active");
    jQuery(this).attr('value', 'Vote');
  }
});

var votes = [{
    id: 0,
    name: "",
    course: "",
    position: "President"
  },
  {
    id: 0,
    name: "",
    course: "",
    position: "Vice President"
  },
  {
    id: 0,
    name: "",
    course: "",
    position: "House of Representatives"
  },
  {
    id: 0,
    name: "",
    course: "",
    position: "House of Representatives"
  },
  {
    id: 0,
    name: "",
    course: "",
    position: "House of Representatives"
  }
];

function President(id, name, course) {
  votes[0].id = id;
  votes[0].name = name;
  votes[0].course = course;
  //return alert(name);
}

function Vice_President(id, name, course) {
  votes[1].id = id;
  votes[1].name = name;
  votes[1].course = course;
  //return alert(name);
}

function House_of_Representatives(id, name, course) {
  votes[2].id = id;
  votes[2].name = name;
  votes[2].course = course;
  //return alert(name);
}

function confirm_votes() {
  var html = "<table class='table'>";
  html += "<thead>";
  html += "<th>Full Name</th>";
  html += "<th>Course</th>";
  html += "<th>Position</th>";
  html += "</thead>";

  for (var i = 0; i < votes.length; i++) {
    html += "<tr>";
    html += "<td>" + votes[i].name + "</td>";
    html += "<td>" + votes[i].course + "</td>";
    html += "<td>" + votes[i].position + "</td>";
    html += "</tr>";
  }
  html += "</table>";
  document.getElementById("confirm_vote").innerHTML = html;
}

active {
  background: #666;
  color: white;
}

.btn:hover {
  background: #666;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <nav class="navbar navbar-light navbar-expand-md navigation-clean">
    <div class="container"><a class="navbar-brand" href="#">Election System</a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse" id="navcol-1">
        <ul class="nav navbar-nav ml-auto">
          <li class="dropdown nav-item"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#">Allen Raven Antipuesto</a>
            <div class="dropdown-menu" role="menu"><a class="dropdown-item" role="presentation" href="#">First Item</a><a class="dropdown-item" role="presentation" href="#">Second Item</a><a class="dropdown-item" role="presentation" href="#">Third Item</a></div>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="card">
    <h5 class="card-header">President</h5>
    <div class="card-body">
      <div class="card" id="president">
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Allen Raven Antipuesto
            <div align="right" style="float:right;"><input type="button" class="btn" value="Vote" onclick="President(1,'Allen Raven Antipuesto','BSIT')"></div>
          </li>
          <li class="list-group-item">Erika Sacay
            <div align="right" style="float:right;"><input type="button" class="btn " value="Vote" onclick="President(2,'Erika Sacay','BSBA Major in Human Resource')"></div>
          </li>
          <li class="list-group-item">Jessica Gimo
            <div align="right" style="float:right;"><input type="button" class="btn " value="Vote" onclick="President(3,'Jessica Gimo','BSAct')"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <br>
  <div class="card">
    <h5 class="card-header">Vice President</h5>
    <div class="card-body">
      <div class="card" id="vice_president">
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Cherubelle Monique Pastoral
            <div align="right" style="float:right;"><input type="button" class="btn " value="Vote" onclick="Vice_President(4,'Cherubelle Monique Pastoral','BSPsych')"></div>
          </li>
          <li class="list-group-item">Marah Jane Tamabalangon
            <div align="right" style="float:right;"><input type="button" class="btn " value="Vote" onclick="Vice_President(5,'Marah Jane Tamabalangon','BSIT')"></div>
          </li>
          <li class="list-group-item">Liza Jill Edquilang
            <div align="right" style="float:right;"><input type="button" class="btn " value="Vote" onclick="Vice_President(6,'Liza Jill Edquilang','BS in Resperiratory Therapy')"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <br>
  <div class="card">
    <h5 class="card-header">House of Representatives</h5>
    <div class="card-body">
      <div class="card">
        <ul class="list-group list-group-flush" id="house_of_representatives">
          <li class="list-group-item">Yprelle Saplad
            <div align="right" style="float:right;"><input type="button" class="btn" value="Vote" onclick="House_of_Representatives(7,'Yprelle Saplad','BSAct')"></div>
          </li>
          <li class="list-group-item">Alanis Flores
            <div align="right" style="float:right;"><input type="button" class="btn" value="Vote" onclick="House_of_Representatives(8,'Alanis Flores','BSAct')"></div>
          </li>
          <li class="list-group-item">Alanis Flores
            <div align="right" style="float:right;"><input type="button" class="btn" value="Vote" onclick="House_of_Representatives(9,'Archille Ras','BSAct')"></div>
          </li>
          <li class="list-group-item">Alanis Flores
            <div align="right" style="float:right;"><input type="button" class="btn" value="Vote" onclick="House_of_Representatives(9,'Archille Ras','BSAct')"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <br>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="width: 100%;" onclick="confirm_votes()">Submit Votes</button>
  <br><br><br>

  <!-- Modal -->
  <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Confirm Votes</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body" id="confirm_vote">

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-default">Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>

如何使用JS将来自按钮的3个单独的值放在一个JSON数组中

0 个答案: