我正在尝试为我的足球队制作一个简单的签到网站。 我的网站是http://www.labombafootball.com 基本上，我用一个简单的“进/出”按钮列出了我团队中的球员，以便球员在有空时签到。
这是我到目前为止写的糟糕的代码，请随意笑。
.height2 {
height: 50px;
text-align: center;
}
.height {
height: 100px;
}
.fc {
display: block;
margin-left: auto;
margin-right: auto;
}
body {
font-family: monospace;
font-size: 4em;
font-weight: bold;
}
button {
background-color: red;
}
button:focus {
background-color: lime;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>La Bomba FC</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 height"><img class="fc" src="images/la-bomba-fc-sm.jpg"></div>
</div>
<div class="row">
<div class="col-xs-8 height2">#2 STEVE B</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#1 INDER JHOOTY</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#21 CHRIS NAKATSU</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#88 NICK MARSHALL</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#99 TONY YUN</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#6 DANIELE BORRELLI</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#11 NITESH SHETTY</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#45 UDAYA MADANAYAKE</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#9 ADRIAN PARTYKA</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#5 PATRICK REGAN</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#13 RAMEZ ALAM</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#8 FAIZAN ALAM</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#33 DAVID CLEBAN</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#14 VICTOR JIMENEZ</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#7 HARRY SANDHU</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#77 JOHN PINEDA</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#44 DEVON CARNEY</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#? JUSTIN CONSTANTINEAU</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
</div>
</body>
</html>谁能告诉我如何在单击按钮后保存值？
最佳答案
如果我们稍微更新您的 html 以在按钮中包含 playerId，我们就有了一些东西来识别服务器上的人。鉴于您已经在使用 bootstrap，我认为最好使用一些 bootstrap 颜色。同样，将 block 元素 (div) 放在 button 中通常不是一件好事，因此稍微移动了 html。
此代码使用 jQuery's ajax POST 数据到您的服务器的函数。如果这是您第一次使用 jQuery，我建议您先了解一下 best practices and things like IIFE's
HTML
<div class="row">
<div class="col-xs-8 height2">#2 STEVE B</div>
<div class="col-xs-4">
<button class="btn btn-success btn-xl btn-player-checkin" data-player-id="2">Check In</button>
</div>
</div>
JS
(function($, window, document) {
$(function() {
// bind to the click event of the checkin button
$('.btn-player-checkin').on('click', function(){
// if the button has the success class - assume the user is checked in
var isCheckedIn = $(this).hasClass('btn-success');
// get the player id from the data attribute
var playerId = $(this).data('player-id');
// call the send function
// sendDataToServer(!isCheckedIn, playerId, $(this)); // send the status we want the player to save (ie. opposite of current);
// if you would like to test the success function without the ajax call, comment out above and uncomment below
if(!isCheckedIn){ // trying to check out
$(this).text('Check In');
}else{ // checking in
$(this).text('Check Out');
}
// cycle classes
$(this).toggleClass('btn-success btn-danger');
});
function sendDataToServer(newStatus, playerId, button){
$.ajax({
url: 'http://myfakeserver.com/checkin', // replace this with the url of the server end point
method: 'POST',
data: {playerId: playerId, status: newStatus} // send this data, on the server you could also record the timestamp of when this occurred
}).done(function(){ // if we successfully complete the post
if(newStatus){ // checking in
button.text('Check Out');
}else{ // trying to check out
button.text('Check In');
}
// cycle classes
button.toggleClass('btn-success btn-danger');
}).fail(function(){
// do something if the post fails
});
}
});
}(window.jQuery, window, document));
附言。这可能会失败，因为您的一位玩家目前的 ID 为 ?
关于javascript - 使用 javascript 进行表单检查，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40858471/