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中进行一些更改。我希望这是你想要实现的目标。

$(".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 2

正如其他人通过更改html提出解决方案一样，我建议在不更改html的情况下实施此解决方案（如果您想坚持当前html ）。

像这样使用.nextAll()和.first()：

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

在您的小提琴上实施：JSFiddle

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

同样，如果您不想更改html，可以使用.prev()解决此问题：

JSFiddle

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

}

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

3 个答案: