javascript - 将输入的默认值更改为隐藏输入的值

Question

我有一个生成不正确名字和姓氏的表单。所以我用用户正确的名字和姓氏进行了隐藏输入。然而，我的查询并没有将该值更改为隐藏输入的值，而且我不确定我的代码有什么问题。这是我正在做的事情的 jsfiddle https://jsfiddle.net/9xmz94bq/2/

这是我的 jquery，我有一个计时器，因为原始文件加载 js 来填充某些输入值，包括我想更改的输入值，我需要等待它完成才能更改任何内容:

setTimeout(function () {
   var firstName = $('#ShipBillInformation_txtShipToFirstName_NewHTML').val();
   var lastName = $('#ShipBillInformation_txtShipToLastName_NewHTML').val();

   var hiddenFirstName = $('body').find('input[name="ShopperFirstName"]').val();
   var hiddenLastName = $('body').find('input[name="ShopperLastName"]').val();

   $(firstName).val($(hiddenFirstName).val());
   $(lastName).val($(hiddenLastName).val());
}, 1000);

Answer 1

如果您查看您的代码，很明显出了什么问题:firstName是输入的值。 $(firstName)不会给你元素的引用。这同样适用于所有其他变量。

$(...)简单地返回 jQuery 对象。因此，要设置该值，您可以执行以下操作:

1. 存储显示的 <input>以 $ 开头的变量中的元素，即 $firstName和 $lastName .这些是 jQuery 对象，您可以将其他 jQuery 函数链接到这些对象。
2. 存储隐藏的<input>没有 String 的变量中的元素值(属于 $ 类型) ，即 hiddenFirstName和 hiddenLastName .这些不是 jQuery 对象，并将它们包装在 $(...) 中也不会做任何事情。

这些约定虽然不是一成不变的，但却非常有用，因为当快速浏览您的代码时，您可以轻松地区分哪些变量引用 jQuery 对象，哪些只是普通的 JS 变量。

setTimeout(function () {

  // Convention: Store references to DOM elements in $...
  var $firstName = $('#ShipBillInformation_txtShipToFirstName_NewHTML');
  var $lastName = $('#ShipBillInformation_txtShipToLastName_NewHTML');

  // Convention: Store strings in normal variable names without $
  var hiddenFirstName = $('body').find('input[name="ShopperFirstName"]').val();
  var hiddenLastName = $('body').find('input[name="ShopperLastName"]').val();

  // Set the value of jQuery object to string
  $firstName.val(hiddenFirstName);
  $lastName.val(hiddenLastName);
}, 1000);

这是一个概念验证示例:

$(function() {
  setTimeout(function() {
    var $firstName = $('#ShipBillInformation_txtShipToFirstName_NewHTML');
    var $lastName = $('#ShipBillInformation_txtShipToLastName_NewHTML');

    var hiddenFirstName = $('body').find('input[name="ShopperFirstName"]').val();
    var hiddenLastName = $('body').find('input[name="ShopperLastName"]').val();

    $firstName.val(hiddenFirstName);
    $lastName.val(hiddenLastName);
  }, 1000);


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ContactField">
     <label>First Name:</label><br>
     <input class="Input_Style required valid" name="txtShipToFirstName" id="ShipBillInformation_txtShipToFirstName_NewHTML" type="text" value="DefaultFirstName">
</div>

<div class="ContactField">
     <label>Last Name:</label><br>
     <input class="Input_Style required" maxlength="30" name="txtShipToLastName" id="ShipBillInformation_txtShipToLastName_NewHTML" type="text" value="DefaultLastName" onfocus="if (this.value=='Last Name') this.value='';" onblur="if (this.value=='') this.value='';">
</div>

<input type="hidden" name="ShopperFirstName" value="MyFirstName">
<input type="hidden" name="ShopperLastName" value="MyLastName">