如何引用“;这个“;在函数中

How to reference "this" in a function

本文关键字：这个 函数 何引用 引用      更新时间：2023-09-26

我想验证几个输入字段。除了焦点方法外，下面的代码运行良好。我预计它无法解释与表单上的输入位置相关的"input"变量。问题：考虑到有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>

我所做的是假设在.find('quantity')这一部分中，你可能将.find('input')理解为它的前一个语句，然后我发现你在使用相同的元素。因此，作为同一个元素，您不需要持有它的引用（在inputvar中）和它的值（quantityvar）来传递到validateInput中。既然这是一个函数，为什么不使用更少的代码并让函数处理它呢？所以我把它改为只传递元素引用，在函数内部，用这个条件if ($input.val().length > 0 && isNaN($input.val()))，我可以检查元素ins是否为空，以及它是否不是数字：

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);
});

演示

您所做的一个重要错误是，您已经解决了它——可能是——在没有注意到的情况下，您在元素树中导航以找到输入，但当您执行$(".product_table").on('change', '.edit_quantity'时，实际上您正在将所有元素中的一个事件与类edit_quantity绑定在具有类product_table的元素中，因此在事件中，您的this已经是输入，您不需要继续它，正如我所做的：

validateInput(this);

我希望这能有所帮助。

相关文章：