0

我创建了一个 html 进度标签，每次单击按钮最多 5 次时我都希望更新该标签。我已经整理了代码以更新另一个来源的进度标签，但由于我是 JS 新手，我无法弄清楚如何链接按钮。任何帮助将不胜感激。这是我的javascript。

$(document).ready( function (){ 

$("#submit").click( function(){

$("#pro-form input").on("click",function(){   

var numValid = 0;
$("#pro-form input[required]").each(function() {
if (this.validity.valid) {
    numValid++;
}
});

var progress = $("#progress"),
progressMessage = $("#progress-message");

if (numValid == 0) {
progress.attr("value", "0");
progressMessage.text("The form, it wants you.");
}
if (numValid == 1) {
progress.attr("value", "20");
progressMessage.text("There you go, great start!");
}
if (numValid == 2) {
progress.attr("value", "40");
progressMessage.text("Nothing can stop you now.");
}
if (numValid == 3) {
progress.attr("value", "60");
progressMessage.text("You're basically a hero, right?");
}
if (numValid == 4) {
progress.attr("value", "80");
progressMessage.text("They are going to write songs about you.");
}
if (numValid == 5) {
progress.attr("value", "95");
progressMessage.text("SO CLOSE. PRESS THE THING.");
}

    });
});
});

css

  *{
      box-sizing:border-box;}   

  body{
   /* background:#333; */
      background-image:url(../images/progress_grunge_background.gif);
      font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
      font-size: 14px;
      line-height: 1.4;
      padding: 20px;}

  #accessbox {
      background-color:#006;
      width:200px;
      height: 100px;
      position:fixed;
      -webkit-border-radius: 1px;
      -moz-border-radius: 1px;
      border-radius: 5px;
      border: 2px solid red;
      left:190px;
      top: 400px; }

  form {
      padding-top:10px;
      padding-left:25px;
      position:relative;}

  input[type="text"], [type="password"], [type="submit"] {
      font-family:Tahoma, Geneva, sans-serif;
      background-color:#99FFFF;
      margin:2px;
      border:2px solid #999;}

  input[type="submit"] {
      margin-top:5px;
      margin-left:20px; }   

  progress {
      width:200px;
      height:20px;}

  .progress-wrap {
      top:550px;
      left:210px;
      position:relative;
     /* text-align: center; */
      font-size: 10px;
      color: red;
      margin: 0 0 20px 0;
      progress {
      width: 100%; 
      margin: 0 0 5px 0; 
    }
  }

html

  <!DOCTYPE HTML>
  <html>
  <head>
  <meta charset="utf-8">
          <title>Untitled Document</title>
      <link href="css/access.css" rel="stylesheet" type="text/css">
      <script src="_js/jquery-1.9.1.min.js"></script>                                       
      <script src="_js/modernizr.js"></script>
  </head>

  <body>

  <div class = "accessbox" id="accessbox">

          <form method="post" class="login" action="">

          <input type="text" class="name" id="username" placeholder="Username"  name="username" />

          <input type="password" class="pass" placeholder="Password"  name="password"/>
          <input type="submit" name="submit" class="submit" id="submit">
      <script src="js/progress_1.js"></script>
          </form>   
  </div>        
  <div class="progress-wrap">
            <progress max="100" value="0" id="progress"></progress>
            <div class="progress-message" id="progress-message">The form, it wants you.</div>
            <!--script src="js/progress.js"></script-->

  </div>       


  </body>
  </html>
4

1 回答 1

0

你只需要一点点重新排序

干得好..

var numValid = 0;

$(document).ready( function (){ 

$("#pro-form input").on("click",function(){   
$("#pro-form input[required]").each(function() {
if (this.validity.valid) {
    numValid++;
}
   });
  });

$("#submit").click( function(){

var progress = $("#progress"),
progressMessage = $("#progress-message");

if (numValid == 0) {
progress.attr("value", "0");
progressMessage.text("The form, it wants you.");
}
if (numValid == 1) {
progress.attr("value", "20");
progressMessage.text("There you go, great start!");
}
if (numValid == 2) {
progress.attr("value", "40");
progressMessage.text("Nothing can stop you now.");
}
if (numValid == 3) {
progress.attr("value", "60");
progressMessage.text("You're basically a hero, right?");
}
if (numValid == 4) {
progress.attr("value", "80");
progressMessage.text("They are going to write songs about you.");
}
if (numValid == 5) {
progress.attr("value", "95");
progressMessage.text("SO CLOSE. PRESS THE THING.");
}


});
});
于 2013-08-05T11:26:43.043 回答