如何使用输入模糊事件更新多个具有相同类名的标签的文本

Question

我正在一个项目中工作，当输入中的焦点丢失时，我必须更新标签的文本这是html部分：

<input id="FirstName" name="FirstName" type="text" value="" class="inputName"/>
<input id="MidName" name="FirstName" type="text" value="" class="inputName"/>
<input id="LastName" name="FirstName" type="text" value="" class="inputName"/>
<p class="passengerTitle1">hola</p>
<input id="FirstName" name="FirstName" type="text" value="" class="inputName"/>
<input id="MidName" name="FirstName" type="text" value="" class="inputName"/>
<input id="LastName" name="FirstName" type="text" value="" class="inputName"/>
<p class="passengerTitle1">hola</p>

并且触发输入的模糊事件的js代码是：

$(document).ready(function () {
      fullName = '';
      $(".inputName").blur(
          function (event) {
            var name = $(this).val();
            fullName += name+ ' ';
            $(".passengerTitle1").text(fullName);
         }
      );
  });

我得到以下结果：两个标签的文本：Phellip E.Summer Edgar B.Thompson

但预期结果是：第一个品牌Phellip E.Summer第二个标签Edgar B.Thompson

这是jsfiddle链接：jsfiddle-lin

我想得到一点帮助，因为这是一个非常重要的项目，我不想错过项目的最后期限。干杯

Answer 1

由于其他人已经通过更改html提出了解决方案，我提出了一个在不更改html的情况下实现这一点的解决方案（如果您想坚持使用当前的html）。

像这样使用.nextAll（）和.first（）：

$(this).nextAll(".passengerTitle1").first().text(fullName);

在您的小提琴上实现：JSFiddle

但您也有另一个问题，即没有正确设置fullName变量。

同样，如果你不想更改html，你可以使用.prve（）来解决它，如下所示：

JSFiddle

Answer 2

您可能需要对html进行一些更改。我希望这就是你想要实现的。

$(".inputName").on("blur", function() {
  var inputName = $(this).parent(".passengerInfo").children(".inputName");
  var outputName = "";
  $(inputName).each(function() {
    outputName += $(this).val() + " ";
  })
  $(this).parent(".passengerInfo").children(".passengerTitle1").text(outputName)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="passengerInfo">
  <input id="FirstName" name="FirstName" type="text" value="" class="inputName" />
  <input id="MidName" name="FirstName" type="text" value="" class="inputName" />
  <input id="LastName" name="FirstName" type="text" value="" class="inputName" />
  <p class="passengerTitle1">hola</p>
</div>
<div class="passengerInfo">
  <input id="FirstName" name="FirstName" type="text" value="" class="inputName" />
  <input id="MidName" name="FirstName" type="text" value="" class="inputName" />
  <input id="LastName" name="FirstName" type="text" value="" class="inputName" />
  <p class="passengerTitle1">hola</p>
</div>

Answer 3

$(document).ready(function () {
  $(".inputName").blur(
      function (event) {
        var titel = getPassengerTitel($(this)); // find the titel element
        var fullName = getName(titel); // read Fullname by titel element
        titel.html(fullName);
     }
  );

})；

function getName(passengerTitelElem){
 var last = passengerTitelElem.prev();
 var middel = last.prev();
 var first = middel.prev();
 var name ='';
 if(first.val()) name += first.val() + ' ';
 if(middel.val()) name += middel.val() + ' ';
 if(last.val()) name += last.val() + ' ';
 return name;

}

function getPassengerTitel(e) {
 var next = e.next();
 if(next.attr('class') == 'passengerTitle1') {
      return next;
 }
 return getPassengerTitel(next);

}