Question

当“相应的”文本输入更改时，我需要更改元素中的值。 “分别”是指与输入的ID具有相同类名的跨度，外加“ txt-”。

因此，如果<input type="text" name="firstname" id="firstname" />的值发生更改，则需要将该值复制到txt-firstname跨度中：

<span class="txt-firstname">First Name</span>

这有效，但仅适用于第一个。我知道我需要某种循环，但是我无法弄清楚：

<script>
$(document).ready(function(){    
    var divID = $('.obituary-form input[type=text]').attr("id");
       $("#" + divID).change(function() {
            $(".txt-" + divID).text(this.value); 
        });
     });    
 });
</script>        

<div class="obituary-form">
    <input type="text" name="firstname" id="firstname" />
    <input type="text" name="middlename" id="middlename" />
    <input type="text" name="lastname" id="lastname" />    
    <input type="text" name="cityofresidence" id="cityofresidence" />
</div>

<div>
    <span class="txt-firstname">First Name</span>
     <span class="txt-middlename">Middle Name</span>
    <span class="txt-lastname">Last Name</span>
    <span class="txt-cityofresidence">City of residence</span>      
</div>

Answer 1

不需要循环。只需在更改输入时使用输入的ID：

$('input').change(function() {
  $(".txt-" + this.id).text(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="obituary-form">
  <input type="text" name="firstname" id="firstname" />
  <input type="text" name="middlename" id="middlename" />
  <input type="text" name="lastname" id="lastname" />
  <input type="text" name="cityofresidence" id="cityofresidence" />
</div>

<div>
  <span class="txt-firstname">First Name</span>
  <span class="txt-middlename">Middle Name</span>
  <span class="txt-lastname">Last Name</span>
  <span class="txt-cityofresidence">City of residence</span>
</div>

Answer 2

这只会得到一个id：

var divID = $('.obituary-form input[type=text]').attr("id");

因此，您的下一条语句最终只会绑定一个元素。与其尝试遍历元素，不如从选择器开始，该选择器针对您的元素并绑定到这些元素：

$('.obituary-form input[type=text]').change(function() {
    // handle the change event
});

这将绑定到每个匹配的元素，无论有多少个元素。现在，在该处理程序内，您需要获取id中的this（在执行处理程序的上下文中）并使用它来匹配目标。也许是这样的：

$('.obituary-form input[type=text]').change(function() {
    let self = $(this);
    $('.txt-' + self.prop('id')).text(self.val());
});

甚至：

$('.obituary-form input[type=text]').change(function() {
    $('.txt-' + this.id).text(this.value);
});

Answer 3

尝试一下：

$(document).on("change","#" + divID,function(e){
    $(".txt-" + divID).text(this.value); 
});

Answer 4

$(document).ready(function(){    
       $('input:text').change(function() {
          var name = $(this).attr('name');
            $('.txt-'+name).text($(this).val()); 
        })
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="obituary-form">
    <input type="text" name="firstname" id="firstname" />
    <input type="text" name="middlename" id="middlename" />
    <input type="text" name="lastname" id="lastname" />    
    <input type="text" name="cityofresidence" id="cityofresidence" />
</div>

<div>
    <span class="txt-firstname">First Name</span>
     <span class="txt-middlename">Middle Name</span>
    <span class="txt-lastname">Last Name</span>
    <span class="txt-cityofresidence">City of residence</span>      
</div>

jQuery更改输入字段，更改相应元素中的值

4 个答案: