Question

我正在尝试为我的足球队制作一个简单的登机网站。我的网站是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>

有人能告诉我如何在点击按钮后保存值吗？

Answer 1

你可以在代码片段中执行如下所示的操作，其中按钮文本根据当前是IN还是OUT而更改。您还可以使用变量“inout”获取值

var divsclass=$(".col-xs-4");

    $.each( divsclass, function(elem) {
      console.log("element "+$(divsclass[elem]).html());
	  $(divsclass[elem]).on("click",function(){
        var inout=$(divsclass[elem]).html();
	  if($(divsclass[elem]).html()=="IN"){
	  $(divsclass[elem]).html("OUT");
      $(divsclass[elem]).parent().attr('class','changeCol');
	  }
        else{
          $(divsclass[elem]).html("IN");
          $(divsclass[elem]).parent().attr('class','changegreen');
}
	  });
	  
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!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>
        <style>
        .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;
        }
        .changeCol{
           background-color:blue;
}
          .changegreen{
           background-color:green;
}
        </style>

        <script>

        </script>

      </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</div></button>
          </div>
            <hr>
          <div class="row">
            <div class="col-xs-8 height2">#1 INDER JHOOTY</div>
            <button><div class="col-xs-4">IN</div></button>
          </div>
            <hr>
          <div class="row">
            <div class="col-xs-8 height2">#21 CHRIS NAKATSU</div>
            <button><div class="col-xs-4">IN</div></button>
          </div>
            <hr>
          <div class="row">
            <div class="col-xs-8 height2">#88 NICK MARSHALL</div>
            <button><div class="col-xs-4">IN</div></button>
          </div>
            <hr>
          <div class="row">
            <div class="col-xs-8 height2">#99 TONY YUN</div>
            <button><div class="col-xs-4">IN</div></button>
          </div>
            <hr>
          <div class="row">
            <div class="col-xs-8 height2">#6 DANIELE BORRELLI</div>
            <button><div class="col-xs-4">IN</div></button>
          </div>
            <hr>
          <div class="row">
            <div class="col-xs-8 height2">#11 NITESH SHETTY</div>
            <button><div class="col-xs-4">IN</div></button>
          </div>
            <hr>
          <div class="row">
            <div class="col-xs-8 height2">#45 UDAYA MADANAYAKE</div>
            <button><div class="col-xs-4">IN</div></button>
          </div>
            <hr>
          <div class="row">
            <div class="col-xs-8 height2">#9 ADRIAN PARTYKA</div>
            <button><div class="col-xs-4">IN</div></button>
          </div>
            <hr>
          <div class="row">
            <div class="col-xs-8 height2">#5 PATRICK REGAN</div>
            <button><div class="col-xs-4">IN</div></button>
          </div>
            <hr>
          <div class="row">
            <div class="col-xs-8 height2">#13 RAMEZ ALAM</div>
            <button><div class="col-xs-4">IN</div></button>
          </div>
            <hr>
          <div class="row">
            <div class="col-xs-8 height2">#8 FAIZAN ALAM</div>
            <button><div class="col-xs-4">IN</div></button>
          </div>
            <hr>
          <div class="row">
            <div class="col-xs-8 height2">#33 DAVID CLEBAN</div>
            <button><div class="col-xs-4">IN</div></button>
          </div>
            <hr>
          <div class="row">
            <div class="col-xs-8 height2">#14 VICTOR JIMENEZ</div>
            <button><div class="col-xs-4">IN</div></button>
          </div>
            <hr>
          <div class="row">
            <div class="col-xs-8 height2">#7 HARRY SANDHU</div>
            <button><div class="col-xs-4">IN</div></button>
          </div>
            <hr>
          <div class="row">
            <div class="col-xs-8 height2">#77 JOHN PINEDA</div>
            <button><div class="col-xs-4">IN</div></button>
          </div>
            <hr>
          <div class="row">
            <div class="col-xs-8 height2">#44 DEVON CARNEY</div>
            <button><div class="col-xs-4">IN</div></button>
          </div>
            <hr>
          <div class="row">
            <div class="col-xs-8 height2">#? JUSTIN CONSTANTINEAU</div>
            <button><div class="col-xs-4">IN</div></button>
          </div>


        </div>
      </body>

    </html>

Answer 2

如果我们稍微更新你的html以在按钮中包含playerId，我们就可以识别服务器上的人了。鉴于你已经使用了bootstrap，我认为最好使用一些bootstrap颜色。类似地，将块元素（div）放在button中通常不是一件好事，所以将html转移到了一点点。

此代码使用jQuery's ajax函数将POST数据发送到您的服务器。如果这是你第一次使用jQuery，我可以建议你先了解best practices and things like IIFE's

<强> JSFIDDLE

<强> 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));

PS。如果您的某位玩家当前身份?

，这可能会失败

使用javascript

2 个答案: