0

在我的 JSP 页面上，我用一个从我的控制器模型中获取值的变量定义了一些 javascript：

<!-- checkout.jsp excerpt -->
<script type="text/javascript">
var form = {}; 
form.checkout = {
                 "firstName" : ${checkoutForm.firstName}, // John 
                 "lastName": ${checkoutForm.lastName}     // Doe
                }; 
</script>
<script type="text/javascript" src=SOME_DOMAIN/static/js/checkout.js"></script>

在同一页面上，我包含了一个 js 文件（checkout.js），它将弹出一个表单来更改页面上的这些值。

// Somewhere in "checkout.js"
var billingStr = form.checkout.firstName + ' ' +  form.checkout.lastName;

$("#billing-info-Modal").find(".modal-footer").find(".btn-primary").click(function(e){
    var formBody =  $("#billing-checkoutForm");
    // 3. update the js literal object on the page
    // alert(billingStr); result John Doe 
    form.checkout.firstName =  $(formBody).find("#billing-firstname").val(); // Peter
    form.checkout.lastName = $(formBody).find("#billing-lastname").val();    // Grimes
    // alert(form.checkout.firstName + ' ' + form.checkout.lastName); // Peter Grimes
    // alert(billingStr); result John Doe still!!

    // 4. update Billing address section
     $('#billingAddress').find('p').html(billingStr);
     // 5. close the modal
     $("#billing-info-Modal").modal('hide'); 
     e.preventDefault(); 
 });

这是我的模态形式的摘录：

<div class="modal hide" id="billing-info-Modal">
<table id="billingTable">
            <tr class="required">
                <td><label for="billing-firstname">First Name <span>*</span></label></td>
                <td><form:input id="billing-firstname"
                        path="bFirstName" cssClass="textField" /> <form:errors
                        path="bFirstName" cssClass="errors" /></td>
            </tr>
            <tr class="required">
                <td><label for="billing-lastname">Last Name <span>*</span></label></td>
                <td><form:input id="billing-lastname"
                        path="bLastName" cssClass="textField" /> <form:errors
                        path="bLastName" cssClass="errors" /></td>
            </tr>
</table>
 <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
   </div>

页面的基本功能：

  1. 我会在页面加载时附加带有表单文字的 ap 标签

  2. 用户将单击一个按钮，该按钮会弹出一个带有可以更改名字和姓氏的表单的模式。

  3. 当用户单击模式上的“保存更改”时，将 form.checkout.firstName 和 form.checkout.lastName 设置为新值。我打算使用 form.checkout 作为稍后提交的对象。所以准确性很重要。
  4. 我想用更新的名字和姓氏更新 p 标签
  5. 关闭模态。

也许我很困惑。我想我可以通过设置它的字段来更新一个 js 文字对象，例如 form.checkout.firstName = "something"。我错了吗？我可以看到我的函数内部的变量正在发生变化，但它不会影响外部的变量。我认为一旦在页面中声明为 var 的变量具有全局范围。因此，它可以在页面的任何位置进行操作。我也错了吗？

任何见解将不胜感激！！！提前致谢。

4

1 回答 1

1

这个变量：

var billingStr = form.checkout.firstName + ' ' +  form.checkout.lastName;

正在分配一个字符串，该字符串等于执行该行时的名字和姓氏。form.checkout如果/当这些属性发生变化时，它不会自动更新。如您评论的警报所示：

alert(form.checkout.firstName + ' ' + form.checkout.lastName); // Peter Grimes
alert(billingStr); result John Doe still!!

和属性已form.checkout.firstName更改，但这不会导致更改- 如果您想采用新值，则必须再次设置它。.lastNamebillingStrbillingStr

“我认为一旦页面中声明为 var 的变量具有全局范围。因此它可以在页面中的任何位置进行操作。”

那是对的。只是您没有更改您尝试使用的变量。

一些与您的实际问题无关的注释：

声明formBody = $("#billing-checkoutForm")后，formBody引用一个 jQuery 对象，然后您可以直接在其上调用 jQuery 方法，如formBody.find(...)or formBody.anyJqueryMethod()- 您不需要说$(formBody).find(...)。

也$(formBody).find("#billing-firstname")不必要地复杂：您通过 id 选择 #billing-firstname 并且 id 应该是唯一的 - 也就是说，您不应该在页面上拥有多个具有相同 id 的元素 - 所以您可以简单地说$("#billing-firstname").

还有一个术语：您不能更新对象文字，但可以更新从文字创建的对象。

于 2012-06-08T03:28:05.147 回答