Как ссылаться на «это» в функции

Question

Я хочу проверить несколько полей ввода. Код ниже работает отлично, за исключением метода фокуса. Я ожидаю, что он не сможет интерпретировать «входную» переменную, которая относится к входному местоположению в форме. Вопрос: Как я могу указать местоположение конкретного входа, учитывая, что имеется более 20 входов? tks!

function validateInput(quantity,input) 
{ 
    if (quantity.value !== " ") { 
     if(isNaN(quantity)) {           
      $(".myerror_alert").append('<div class="alert alert-danger"><strong>Warning!</strong> You have entered an non valid character, go back and enter a real number </div>'); 
      input.focus(); // THIS DOES NOT WORK 
      return false; 
     } 
    } 
    return true; 
} 

$(".product_table").on('change', '.edit_quantity',function(){ 

    var quantity = $(this).parents(':eq(1)').find('input').filter(".edit_quantity").val(); 
    var input = $(this).parents(':eq(1)').find('quantity').filter(".edit_quantity"); 


    validateInput(quantity, input); 

// MORE CODE GOES HERE // 

}); 

HTML:

   <tr class='delete_row'> 
        <td><input class="product_id form-control" readonly="readonly" name="product_id[0]" type="text" value="123"></td> 
        <td><input class="edit_product_id form-control" readonly="readonly" name="product_id[0]" type="text" value="Euroshake Blackstone"></td> 
        <td><input class="edit_quantity" name="product_id[0]" type="text" value="120"></td> 
        <td id="price"><input class="unit_price form-control" readonly="readonly" style="text-align:right;" name="price" type="text" value="120.00"></td> 
        <td><input class="line_cost form-control" readonly="readonly" style="text-align:right;" name="cost" type="text" value="14400.00"></td> 
        <td> 
         <span style="padding-left:12px;"><input name="delete" type="checkbox" value="123"></span> 
        </td> 
       </tr> 

Answer 1

То, что я был supose, что в этой части .find('quantity') вы, вероятно, означает .find('input') как его предыдущее заявление, то я полагаю, что вы работали с тем же элементом там. Таким образом, будучи одним и тем же элементом, вам не нужно удерживать его ссылкой (в input var), и его значение (quantity var) перейдет в validateInput. Поскольку это функция, почему бы не работать с меньшим количеством кода и заставить функцию обрабатывать ее, правильно? Таким образом, я изменил его передать только ссылку элемента и внутри функции с этим условием if ($input.val().length > 0 && isNaN($input.val())) я мог проверить, если элемент ins't пуст, а также, если это не номер:

function validateInput(input) 
{ 
    var $input = $(input); 

    if ($input.val().length > 0 && isNaN($input.val())) { 
     $(".myerror_alert").append('<div class="alert alert-danger"><strong>Warning!</strong> You have entered an non valid character, go back and enter a real number </div>'); 
     input.focus(); 
     return false; 
    } 
    return true; 
} 

$(".product_table").on('change', '.edit_quantity',function(){ 
    validateInput(this); 
}); 

Demo

Одна из важных ошибок, которые вы совершили, которую вы обманываете - возможно, не заметив этого, заключается в том, что вы просматриваете дерево элементов, чтобы найти вход, но когда вы делаете $(".product_table").on('change', '.edit_quantity', вы фактически привязываете событие во всех элементах с классом edit_quantity внутри элемента с классом product_table, поэтому внутри события ваши thisуже вход, вам не нужно идти за ним, как я сделал:

validateInput(this); 

Я надеюсь, что это помогает.