javascript - 当值更改时，jQuery替换先前的.after

$("#paragraphDuration").bind('keyup', function() {

   var fullDuration = $("#fullDuration").val(),
       paragraphDuration = $(this).val();

   $(this).after(function() {
       if ($(this).val() != '') {
           $(this).after(fullDuration - paragraphDuration + " min");
       } else {
           $(this).after("");
       }
   });
});

在多次更改（“ #paragraphDuration”）之后，这是我得到的：



这不是我想要的！

当用新值更改（“ #paragraphDuration”）值时，如何替换上一个.after？

谢谢

最佳答案

您需要覆盖旧值。最好不要使用.after设置文本，仅在预定义的span元素上使用.text()方法即可。

因此，例如：

html

<input type="text" id="paragraphDuration"><span class="textContainer"></span>

js

$("#paragraphDuration").bind('keyup', function() {

   var fullDuration = $("#fullDuration").val(),
       paragraphDuration = $(this).val();

   $(this).next('.textContainer').text(
     $(this).val() !== ''
       ? (fullDuration - paragraphDuration + " min")
       : ""
   );
});