Question

真的不知道试图找出下面代码中发生的事情......

function updateColourDropdown(url) {
    $("#selectList").unbind();
    $.post(setUniqueParam(url), $("#fruitForm").serialize(),
            function(data) {
                if (checkException(data)) {
                    $("#fruitDiv").children().each(function() {
                        removeElem(this);
                    }).end().html(data);
                    $("#selectList").change(function() {
                        updateColourDropdown($("#fruitColourView").val());
                    });
                    organiseAllocateTeams();
                }
                data = null;
            }
    );
    return false;
}

基本上有一个表单包含两个下拉列表，水果和颜色。如果用户更改了第一个选择列表中的水果，则会调用服务器以找出可用颜色以填充第二个选择列表。

我的html是使用JSP输出的。

selectList = id包含水果列表的选择列表

包含选择列表

的表单的

fruitForm = id 包含我的两个选择列表的div的

fruitDiv = id

fruitColourView = id用于链接到struts操作的隐藏输入字段（ xml ）

这是有效的代码。我试图在另一个页面上复制这个代码，但是我发现它有点棘手，因为我不确定它实际上在做什么，为什么......从我可以告诉'data'变量包含整个代码对于我的页面..

我已经在jQuery网站上查找了所有.children .each .end等等但是我无法在逻辑上将它们全部放在一起......

谢谢你，希望我已经足够清楚了。

Answer 1

function updateColourDropdown(url) {
    // Remove handlers on #selectList
    $("#selectList").unbind();

    // Post to URL specified in the parameter, serializing #fruitForm
    $.post(setUniqueParam(url), $("#fruitForm").serialize(),

            // Run this on success
            function(data) {

                // Assuming `checkException` looks in the returned
                // data to see if something went wrong.
                if (checkException(data)) {

                    // Something went wrong; for each of #fruitDiv's children 
                    // run the function that removes that child element, then
                    // at the end, put the data, which appears to be HTML,
                    // into #fruitDiv
                    $("#fruitDiv").children().each(function() {
                        removeElem(this);
                    }).end().html(data);

                    // Then set a new `change` event handler on #selectList
                    // that runs `updateColourDropdown, given the value of
                    // #fruitColourView. See Note 1.
                    $("#selectList").change(function() {
                        updateColourDropdown($("#fruitColourView").val());
                    });

                    // Then call this.
                    organiseAllocateTeams();
                }

                // Useless.
                data = null;
            }
    );


    return false;
}

注1：在合理的jQuery版本中，我可能会使用一个使用事件委托的处理程序来处理这个问题，以避免重复解绑/重新绑定。

这个问题与Struts没有任何关系，并且没有太多的事情要特别难以理解。

解释此代码中发生的情况

1 个答案: