Question

我试图将某人键入的内容输入一个文本输入并将其复制到第二个文本输入中。我能够做到这一点，我的问题在于每个功能。这两个输入字段（并排）连续重复几次，每行需要不同的值。你可以在小提琴中看到我的问题。

以下是一些示例代码：

HTML：

<div class="media">
    <div class="row">
        <div class="input-holder-one">
            <input type="text">
        </div>
        <div class="input-holder-two">
            <input type="text">
        </div>
    </div>
</div>
<div class="media">
    <div class="row">
        <div class="input-holder-one">
            <input type="text">
        </div>
        <div class="input-holder-two">
            <input type="text">
        </div>
    </div>
</div>

的jQuery

jQuery(function ($) {
    $('.media .row').each(function(){

        $(this).find('.input-holder-one input').on('keyup', function(){
            $('.input-holder-two input').val($('.input-holder-one input').val());
        });
    });
});

这是一个小伙伴：

https://jsfiddle.net/p37s6k3c/

Answer 1

这里的问题是只使用选择器$('.input-holder-two input')并使用.val()只会设置匹配的第一个元素的value（，因为选择器会获得许多元素< / em>的）。您可以使用$(this).find()来解决此问题，就像附加事件处理程序以获取所需元素一样。

您可以使用$(this).find(..)以与附加事件处理程序相同的方式获取这些元素：

$('.media .row').each(function(){ var $holderOne = $(this).find('.input-holder-one input'); var $holderTwo = $(this).find('.input-holder-two input'); $holderOne.on('keyup', function(){ $holderTwo.val($holderOne.val()); }); });

Fiddle

Answer 2

你的选择器很糟糕。您需要找到同一.row。

中的输入

jQuery(function ($) {
    $(".input-holder-one>input").keyup(function(e){
      var $this = $(this);
      $this.parents(".row").find(".input-holder-two>input").val($this.val());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media">
    <div class="row">
        <div class="input-holder-one">
            <input type="text">
        </div>
        <div class="input-holder-two">
            <input type="text">
        </div>
    </div>
</div>
<div class="media">
    <div class="row">
        <div class="input-holder-one">
            <input type="text">
        </div>
        <div class="input-holder-two">
            <input type="text">
        </div>
    </div>
</div>

使用每个函数

2 个答案: