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

我在一个项目中工作，当焦点在输入中丢失时，我必须更新标签的文本 这是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>

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

但预期结果是： 第一个标签是Phellip E.Summer 第二个标签是埃德加·汤普森

这是JSFIDLE链接：

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

---

干杯。

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

$（.inputName”）.on（“模糊”，函数（）{
var inputName=$（this）.parent（.passengerInfo”）.children（.inputName”）；
var outputName=“”；
$（inputName）.each（函数（）{
outputName+=$（this）.val（）+“”；
})
$（this）.parent（“.passengerInfo”）.children（.passengerTitle1”）.text（outputName）
})

霍拉

霍拉

正如其他人通过更改

html

提出的解决方案一样，我建议在不更改

html

的情况下实现这一点的解决方案（如果您想坚持当前的

html

）

像这样使用：

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

在你的小提琴上实现：

但是您还有另一个问题，即没有正确设置

fullName

变量

同样，如果您不想更改

html

，可以使用以下方法解决此问题：

}))

}

---

}

您可以发布您的实际javascript吗？您发布的内容与您所说的问题不匹配。问题是因为您的标签具有相同的类名。还有几个问题。您需要为不同的乘客提供不同的类名，否则您的标签将被弄乱。模糊事件会增加伤害。尝试使用不同的类名，仅当值存在时才追加名称。如何检查值是否存在，我对js的了解有限。干杯。这接近我所知道的，我如何才能正确重置fullName变量，因为现在第二个标签的值已附加到我在其他字段中写入的内容中。在另一个

JSFiddle

中添加了第二个问题的解决方案。

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

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