我的jquery在我的材料设计文本域中不起作用

Question

我的jquery代码无法帮助我，请我只是一名学生。我不知道我的编码工作是否有错，但jquery无效。我在textfield中输入标签回到它的位置并覆盖我输入的内容后，我有浮动标签文本字段。我的英语不太好

我在jquery中的代码

  <script type="text/javascript" src="{{ mix('js/app.js') }}"></script>
  <script type="text/javascript">
  $(function(){

    $('.effect').each(function(){
      changeState($(this));
    });

    $('.effect').on('focusout', function(){
      changeState($(this));
    });

    function changeState($formControl){
      if($formControl.val().length > 0){
        $formControl.addClass('has-value');
      }
      else{
        $formControl.removeClass('has-value');
      }
    }
  });
  </script>

和我在textfields中的代码

  <div class="row">
          <div class="col-md-6">
            <input type="text" name="fname" class="effect" required autocomplete="off" maxlength="32">
            <label class="ph">First Name</label>
          </div>
          <div class="col-md-6">
            <input type="text" name="lname" class="effect" required autocomplete="off" maxlength="32">
            <label class="ph">Last Name</label>
          </div>
        </div>

我的css代码

 .ph{
  display: block;
  position: relative;
  top: -20px;
 left: 0px;
 color: #999;
 font-family: 'Helvetica', sans-serif;
 font-size: 14px;
 z-index: 1;
 transition: all 0.3s ease;
  }
  .effect{
 display:block ;
 position: relative;
 background: none;
 border:none;
 border-bottom: 1px solid #ddd;
 width:100%;
 font-family: 'Helvetica', sans-serif;
 font-size: 16px;
 color: #00aced;
 z-index: 2;
  }
  .effect:focus{
 outline: none;
 border-bottom: 1px solid #00aced;
  }
  .effect:focus + .ph{
 top:-40px;
 font-size: 11px;
 color: #00aced;
  }
  .has-value + .ph{
 top:-40px;
    font-size: 11px;
 color: #00aced;
  } 

的package.json

{
"private": true,
"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
    "axios": "^0.17",
    "bootstrap": "^4.0.0",
    "popper.js": "^1.12",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^2.0",
    "lodash": "^4.17.4",
    "vue": "^2.5.7"
},
"dependencies": {
    "font-awesome": "^4.7.0"
}

}