Question

我有一个表单，它会生成一个不正确的名字和姓氏。所以我用用户正确的名字和姓氏做了隐藏的输入。然而，我的查询并未将该值更改为隐藏输入的值，而且我不确定我的代码有什么问题。这是我正在做的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对象。因此，要设置该值，您可以执行以下操作：

将显示的<input>元素存储在以$开头的变量中，即$firstName和$lastName。这些是jQuery对象，您可以将其他jQuery函数链接到。
将隐藏的<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">

Answer 2

你可能需要的是这个

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

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

2 个答案: