Question

只是做一点点注册页面，我试图让它检查每个字段是否有值如果不是它会添加.error的类但是如果所有3个输入都有一个值然后显示成功页面< / p>

$(".btn").click(function() {
    //Check to see if the inputs have any data
    if ($('.username-input').val() == '') {
        $(this).addClass('error');
    }
    else if ($('.password-input').val() == '') {
        $(this).addClass('error');
    }
    else if ($('.email-input').val() == '') {
        $(this).addClass('error');
    }

    //if all inputs have data open up success page and close it.
    $(".btn").click(function() {
        $(".success-wrapper").animate({
            bottom: "0%"
        }, 'slow');
    });
    $(".close").click(function() {
        $(".success-wrapper").animate({
            bottom: "-100%"
        }, 'slow');
    })
});;

Answer 1

这可能会让你开始：

＆＃13;

/* javascript */
arr = ['username-input', 'password-input', 'email-input'];
err = false;

$(".btn").click(function() {
  err = false;
  $.each(arr, function(ndx, fld){
    $('.'+fld).removeClass('errorField');
    if ( $('.'+fld).val() == "" ){
      $('.'+fld).addClass('errorField');
      err = true;
    }
  }); //END $.each
  if (err) return false;
  $('.success-wrapper').fadeIn();
  $('.success-inner').animate({
    top : '20vh'
  },700,function(){
      setTimeout(function(){
        $('.success-inner').animate({
          top: '100vh'
        },700);
        $('.success-wrapper').fadeOut(500);
      },1500);
  });
}); //END .btn click

＆＃13;

/*  CSS  */
html,body{min-height:100vh;}
* {position:relative;box-sizing:border-box;}

.success-wrapper{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  text-align:center;
  background:black;
  opacity:0.7;
  display:none;
}
.success-inner{
  top:100vh;
  width:30vw;
  height:80px;
  margin:0 auto;
  font-size:2rem;
  color:darkorange;
}
.errorField{background-color:yellow;}

＆＃13;

<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input class="username-input" type="text" /><br>
<input class="password-input" type="text" /><br>
<input class="email-input" type="text" /><br>
<button class="btn">Submit</button>

<div class="success-wrapper">
  <div class="success-inner">Total Success</div>
</div>

＆＃13;

Answer 2

您不想在第一个事件处理程序中添加新的事件侦听器。如果您有所有输入的值，则只想在第二个$(".btn").click内运行代码。

这意味着您需要跟踪是否有任何错误。

您还可以通过循环输入并使用toggleClass()来删除代码重复，因为您还需要删除错误类（可能会在另一个事件处理程序中执行此操作，例如模糊）

$(".btn").click(function() {
    var isValidForm = true;
    $('.username-input,.password-input, .email-input').each(function(){
            var hasError = !this.value; 
            $(this).toggleClass('error', hasError);
            if(hasError){
               isValidForm  = false;
            } 
    });

     if(isValidForm){
        $(".success-wrapper").animate({
            bottom: "0%"
        }, 'slow');
     }

});

$(".close").click(function() {
    $(".success-wrapper").animate({
        bottom: "-100%"
    }, 'slow');
})

Answer 3

var serialport = require("serialport");
var SerialPort = serialport.SerialPort;
var WebSocketServer = require("ws").Server;

var serialPort = new SerialPort("COM5", {
  baudrate: 9600,
  parser: serialport.parsers.readline("\n")
});

var wss = new WebSocketServer({ port: 3000 });

serialPort.on("open", function () {

  console.log('open');

    var weight = 0;

    wss.on("connection", function(ws) {

        serialPort.on('data', function(data) {

            weight = data.toString();

            wss.clients.forEach(function(wssclient) {
                wssclient.send(weight);
            });

        });

    });

});

您不想在其他点击处理程序中使用点击处理程序，这不会触发事件，而是将事件添加到按钮的操作列表中;然后当您再次单击该按钮时，将触发检查事件和添加的事件。

添加了“.close”事件，我对其进行了编辑，以便停止任何正在进行的动画并启动“关闭”事件。

jQuery运行多个if语句然后继续

3 个答案: