Question

我的产品页面上有两个字段，使用的是＆＃39; .qty＆＃39;。我想要实现的是当我在任一输入字段中输入值时，这两个输入字段都填充了该值。

我目前的代码是：

<button id="btn" onclick="download(http://imageurl) value ="download"><button>    


<script>
  function download(url){
 console.log(url);
var link = document.createElement('a');
              link.href = url;
              link.download = "image.jpg";
              document.body.appendChild(link);
              link.click();}
</script>

我在输入文本元素中使用function updateProductAmount() { jQuery('.add-to-cart .qty').each(function() { var productAmount = this.value; jQuery('.add-to-cart .qty').val(productAmount); // Requires more work. }); }调用此代码。

此代码只能以一种方式运行。更改第一个输入元素时，它会将值复制到最后一个输入元素。但是，当最后一个输入元素发生更改时，它会更改回第一个输入元素的值。

有人能指出我做错了什么并帮助我吗？

提前致谢。

Answer 1

尝试以下方法：

 $(document).on('change','.add-to-cart .qty', function(){
    $('.add-to-cart .qty').val($(this).val());
 });

Js Fiddle Example

Answer 2

尝试将使用过的输入字段作为参数传递。例如：检查使用了哪个字段。您还可以将引用传递给第二个字段（如果您打算坚持使用两个字段。沿线的某些内容应该可以解决这个问题

<input type="text" value="" name="qty" class="qty" onchange="updateProductAmount(this, jQuery('.add-to-cart'))"/>
<input type="text" value="" name="add-to-cart" class="add-to-cart" onchange="updateProductAmount(this, jQuery('.qty'))"/>

并在脚本部分

function updateProductAmount(caller, fieldToChange) {
    jQuery(fieldToChange).val(caller.value);
}

Answer 3

如果我理解，您需要更改兄弟姐妹

的值

jQuery( '.add-to-cart .qty' ).on( 'change' , function () {
    jQuery( this ).siblings().val( jQuery( this ).val() );
} );

Answer 4

试试这个：

$(document).ready(function() {

    $(".qty").on("input",function(){

        $(".qty").not($(this)).val($(this).val());

    })
})

最终代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <input type="text" class="qty" value="" />
     <input type="text" class="qty" value="" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function() {

        $(".qty").on("input",function(){

            $(".qty").not($(this)).val($(this).val());

        })
    })
    </script>
</body>
</html>

Answer 5

jQuery＆＃39; s each()中this的值是此each()迭代的对象值，而不是触发事件的元素。在输入each()之前，您需要存储要更改输入的值。

然后使用带有each()的第二个jQuery语句和相同的选择器来更改值。这会导致所有值首先更改为第一个<input>的值，然后更改为第二个<input>的值，然后更改为第三个，等等。当您将所有<input>值更改为第二个<input>的值时，第二个<input>的值已经更改为值{第一个<input>。实际上，这导致所有<input> s跟随第一个<input>的值，而不能更改除第一个之外的任何输入。

显示this中each()的价值的示例：

＆＃13;

$('.add-to-cart input.qty').on('input', updateProductAmount);

function updateProductAmount() {
    $('.add-to-cart input.qty').each(function() {
        console.log('This points to id: ' + this.id + " ::value=" + this.value);
        var productAmount = this.value;
        $('.add-to-cart .qty').val(productAmount);
        // Requires more work.
    });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add-to-cart">
    <input class="qty" id="firstInput">
    <input class="qty" id="secondInput">
</div>

＆＃13;

最低限度更改，功能性：在productAmount之前存储each()：

＆＃13;

$('.add-to-cart input.qty').on('input', updateProductAmount);

function updateProductAmount() {
    var productAmount = this.value;
    $('.add-to-cart input.qty').each(function() {
        $('.add-to-cart .qty').val(productAmount);
        // Requires more work.
    });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add-to-cart">
    <input class="qty" id="firstInput">
    <input class="qty" id="secondInput">
</div>

＆＃13;

此外：

无需更改触发事件的元素的值。因此，您可以使用.not($(this))将其从您使用each()进行迭代的jQuery对象中删除。
您可能正在迭代非<input> s的元素。您可以将选择器更改为仅选择<input>元素。
从var productAmount = this.value;中删除each()后，不再需要使用each()显式迭代jQuery对象。您可以使用jQuery的隐式迭代来使用val()更改value。

＆＃13;

$('.add-to-cart input.qty').on('input', updateProductAmount);

function updateProductAmount() {
    var productAmount = this.value;
    $('.add-to-cart input.qty').not($(this)).val(productAmount);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add-to-cart">
    <input class="qty" id="firstInput">
    <input class="qty" id="secondInput">
</div>

＆＃13;

既然您没有使用each()，this将引用触发事件的元素。因此，不需要首先将值存储在单独的变量中。但是，如果您希望迭代大量数量的元素，那么使用单独的变量将比在每次迭代中从元素获取value稍快一些。

最终代码：

＆＃13;

$('.add-to-cart input.qty').on('input', updateProductAmount);

function updateProductAmount() {
    $('.add-to-cart input.qty').not($(this)).val(this.value);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add-to-cart">
    <input class="qty" id="firstInput">
    <input class="qty" id="secondInput">
</div>

＆＃13;

Answer 6

这是你想要做的JS小提琴。

  function updateProductAmount() {
      $('.qty').val($(this).val());
  }

  $(".qty").change(updateProductAmount);

https://jsfiddle.net/ahmedhawas7/zx3sqxft/

Answer 7

这里的问题是您要为每个输入设置每个值。如果您跟踪代码，您将看到如下内容：

更改第一个输入
调用updateProductAmount
.each被调用，所以我们为匹配'.add-to-cart .qty'选择器（两个输入）的所有元素运行你的函数
我们保存“this”输入的值，这将是.each找到的第一个输入，或者我们实际更改的输入
然后是代码“jQuery（'。add-to-cart .qty'）。val（productAmount）;”将“productAmount”的值设置为与'.add-to-cart .qty'选择器匹配的所有元素，这两个输入都是输入。这意味着输入2现在具有输入1的值，就像我们想要的那样。
我们的.each现在移动到列表中的第二个元素，在步骤5中检索第二个输入的值，该值等于第一个元素的值，并将两个输入的值设置为该值（不是实际上改变任何东西，因为他们都已经有了这个值。

现在，正如您所看到的，如果更改了第二个输入，则会发生相同的操作顺序。这意味着将首先检查第一个输入，并将其值赋予与选择器匹配的所有输入，用第一个输入覆盖第二个输入的值。因此，第二个输入的值是什么并不重要，因为当.each到达那里时，它已经被输入1的值覆盖了。

正如其他人所说，这里的解决方案是简单地找到你想用jQuery更新的所有匹配元素，并将它们设置为this.value。使用jQuery val函数更新所有匹配元素的值，无需使用.each循环：

function updateProductAmount() {
  $('.add-to-cart .qty').val(this.value);
}

无论使用哪个字段，都将两个输入字段的值更改为相同的值

7 个答案: