javascript - 'this' 没有选择 jquery 函数

Question

我有一个在单击 .btn 时触发的函数，它将检查带有 .req 类的输入和文本区域是否已填充。如果没有，则假设仅选择空元素并添加类 .warning。条件函数运行良好，但我无法使用“this”选择元素。为什么？正确的做法是什么？

      <form id="form1" name="form1" method="post" action="./confirm.php">
            <table>
             <tr>
                <th>お名前*</th>
               <td>
                <input class="req" type="text" name="f_name" value="" placeholder="山田 太郎">
              </td>
            </tr>
            <tr>
              <td>
        <textarea class="req" id="f_request" name="f_request" data-validation-engine="validate[required]"></textarea>
              </td>
            </tr>
        </table>
        <div class="btn">
            <input class="submit" type="hidden" name="input_flag" value="true">
            <input class="submit" type="submit" value="お問い合わせ内容を確認">
        </div>
     </form>
     <script>   
        function check(){
                if(!$(".req").val()){
                    $('.submit').addClass('null');
                    console.log("null");
                } else{
                    $('.submit').removeClass('null');
                    console.log("normal");
                };
            };
            check();

        $('.btn').click(function(){
         check();
            if($('.req').val() != '') {
                $(this).removeClass('warning');

            }else{
                $(this).addClass('warning');
            }
         });

</script> 

Answer 1

要检查具有 req 类的所有元素，您可以使用 .each() 和 $(this)

$('.btn').click(function(e){
   e.preventDefault();
    $('.req').each(function(){
        if($(this).val() != '') {
            $(this).removeClass('warning');
        }else{
            $(this).addClass('warning');
        }
    });
});

工作片段:-

$('.btn').click(function(e){
  e.preventDefault();
  var emptyCounter = 0;
  $('.req').each(function(){
    if($(this).val() != '') {
      $(this).removeClass('warning');
    }else{
      $(this).addClass('warning');
      emptyCounter++;
    }
  });
  if(emptyCounter > 0){
    $('.submit').addClass('null');
    console.log("null");
  } else{
    $('.submit').removeClass('null');
    console.log("normal");
  };
});

.warning{
 border-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post" action="./confirm.php">
        <table>
         <tr>
            <th>お名前*</th>
           <td>
            <input class="req" type="text" name="f_name" value="" placeholder="山田 太郎">
          </td>
        </tr>
        <tr>
          <td>
    <textarea class="req" id="f_request" name="f_request" data-validation-engine="validate[required]"></textarea>
          </td>
        </tr>
    </table>
    <div class="btn">
        <input class="submit" type="hidden" name="input_flag" value="true">
        <input class="submit" type="submit" value="お問い合わせ内容を確認">
    </div>
 </form>