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 Link

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）

Jquery来自输入和变量的.val（）之间的比较

1 个答案: