'this' не выбирает функцию jquery - PullRequest
Новая
       23

'this' не выбирает функцию jquery

2 голосов
/ 04 июня 2019

У меня есть функция, которая срабатывает при нажатии .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>

Ответы [ 4 ]

3 голосов
/ 04 июня 2019

Чтобы проверить все элементы с классом 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>
1 голос
/ 04 июня 2019

Если HTML-код выглядит примерно так: 

        <div>
        <input type="text" class="req" value=""/>
        <input type="text" class="req" value=""/>
        <input type="text" class="req" value=""/>
        <input type="text" class="req" value=""/>
        </div>
        Then you can check all elements with req class, you can use .each()

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

В указанном вами коде $ (this) нацелен на класс .btn, а не на ввод.

1 голос
/ 04 июня 2019

Что я понимаю, вы должны пройти через все .req и затем проверить условие: 

 $('.btn').click(function(){
    $('.req').each(function(index, elem) {
       if($(elem).val() != '') {
          $(elem).removeClass('warning');
       }else{
          $(elem).addClass('warning');
       }
    }
 });
1 голос
/ 04 июня 2019

Вы проверяете значение первого элемента всегда вместо того, чтобы проверять число пустых элементов, используя метод filter() с обратным вызовом, который повторяется и в обратном вызове this ссылается на элемент.

$('.btn').click(function(){
    if($('.req').filter(function(){ return $(this).val() === ''; }).length === 0) {
        $(this).removeClass('warning');

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

ОБНОВЛЕНИЕ: Если вы хотите применить стиль к входным данным, вы можете использовать метод each() для итерации и toggleClass() метод для переключения класса на основе условия. 

$('.btn').click(function(){
    // iterate over elements
    $('.req').each(function(){ 
      // toggle class based on value
      $(this).toggleClass('warning', this.value === '');
    });
 });
...