jQuery比较输入和变量中的.val（）

Question

我正在尝试使用“提交”按钮进行输入，如果我输入正确的文本并按“提交”，则会显示div，否则，输入和按钮都会变为红色。 Jshint说我的代码没有问题，但是似乎是因为它不起作用。 我将在下面粘贴代码，以及我正在处理的Codepen链接。 任何帮助将不胜感激！

HTML：

<input type="text" /><button>sumbit</button>
<div id="test"></div>

CSS：

button{
  width:70px;
  height:22px;
  background:#2E9AFE;
  border: 2px solid #0489B1;
  color: white;
}

button:hover{
  width:70px;
  height:22px;
  background:#013ADF;
  border: 2px solid #0489B1;
  color: white;
}

input{
  width:170px;
  height:16px;
  margin-right: 10px;
  background:#2E9AFE;
  border: 2px solid #08298A;
  color: white;
}

#test{
  width:256px;
  height:300px;
  margin-top: 10px;
  background: #F5D0A9;
  display: none;
}

最后是javascript / JQuery：

$(document).ready(function(){

  $('input').on('focus', function(){
    $(this).css({'background' : '#31B404'});
  });

  $('input').on('focusout', function(){
        $(this).css({'background' : '#2E9AFE'});
  });

  $('button').on('click', function(){
    var $a = Angusmiguel21;

    if( ($('input').val() ) == ($a) ){
      $('test').slideToggle();
    }
    else{
      $('input').css({'background' : 'red'});
      $('button').css({'background' : 'red'});
    }

  });

});

问题始于单击按钮……也许这可以使用纯Javascript完成，但是我对JQ感到更满意，但是再次欢迎任何帮助！

这是CodePen链接

Answer 1

将此添加到文件的顶部。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
        $(document).ready(function(){

          $('input').on('focus', function(){
            $(this).css({'background' : '#31B404'});
          });

          $('input').on('focusout', function(){
                $(this).css({'background' : '#2E9AFE'});
          });

          $('button').on('click', function(){

            var a = "Angusmiguel21";

        if( ($('input').val() ) == (a) ){
              $('#test').slideToggle();
            }
            else{
              $('input').css({'background' : 'red'});
              $('button').css({'background' : 'red'});
            }

              });

        });

        </script>

您的变量$ a应该是a。 还要在值周围加上引号。 还应该是#test（这是一个ID）