什么是jQuery focus()方法在这段代码中做什么?

时间:2014-11-23 02:57:07

标签: javascript html forms shopping-cart liquid

我想知道此脚本中是否需要以下行,如果需要,它的用途是什么。

$("#quantity-0").focus(); 

如果我没有id为“quantity-0”的表单字段,我可以关注哪些其他元素(如果需要)?我可以关注隐藏的表单元素吗?

这是我的代码。它来自this blog

<script type="text/javascript" charset="utf-8">
//<![CDATA[
// Including jQuery conditionnally.
if (typeof jQuery === 'undefined') {
    document.write({{ "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" | script_tag | json }});
    document.write('<script type="text/javascript">jQuery.noConflict();<\/script>');
}
//]]>
</script>

<script>

$(document).ready(function () {
    $("#quantity-0").focus();    
    var length = $("#linklist-length").val();
    $("#submit-table").click(function(e) {     
        e.preventDefault();
        //array for Variant Titles
        var toAdd = new Array();
        var qty;
        for(i=0; i < length; i++){

            toAdd.push({
                variant_id: $("#variant-"+i).val(),        
                quantity_id: $("#quantity-"+i).val() || 0
            });
        }
        function moveAlong(){
            if (toAdd.length) {
                var request = toAdd.shift();
                var tempId= request.variant_id;
                var tempQty = request.quantity_id;
                var params = {
                    type: 'POST',
                    url: '/cart/add.js',
                    data: 'quantity='+tempQty+'&id='+tempId,
                    dataType: 'json',
                    success: function(line_item) { 
                        //console.log("success!");
                        moveAlong();

                    },
                    error: function() {
                        //console.log("fail");
                        moveAlong();

                    }
                };
                $.ajax(params);
            }
            else {              
                document.location.href = '/cart';
            }  
        };
        moveAlong();
    });
});

</script>

1 个答案:

答案 0 :(得分:1)

  

我想知道此脚本中是否需要以下行,如果需要,它的用途是什么。

调用没有参数的jQuery .focus() method会将焦点设置为指定的元素。该行是文档就绪处理程序中的第一行。因此,它的目的是在页面首次打开/加载时将焦点设置到该特定字段。

至于是否需要,这完全取决于页面设计者。将焦点设置为用户最有可能想要首先与之交互的字段通常对他们有帮助。如果你没有这样做,它就不会阻止页面工作或任何东西。

  

如果我没有id为“quantity-0”的表单字段,我可以关注哪些其他元素(如果需要)?

您可以将焦点设置为您喜欢的任何元素。通常,这将是某种形式元素(输入,按钮等)或超链接。无论哪一个对于用户与首页加载进行交互最有意义。

  

我可以关注隐藏的表单元素吗?

你为什么要那样做?用户与隐藏元素交互没有意义。我相信尝试将焦点设置为隐藏元素可能会在某些浏览器中出错。