我如何使用輸入模糊事件更新具有相同類名的多個標簽的文本

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（）和。首先（）是這樣的：

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

}