如何动态读取输入ID并将其值放在文本jQUery中

Question

我正在尝试阅读input的值并在P标记中更新它，值将是动态的。

每次更新点击时，

更新，值应在段落下方替换

＆＃13;

＆＃13;

input {
  display: block;
  margin-bottom: 10px;
}

＆＃13;

<input id="Q_Star1_Text" type="text" name="starValue" value="Value One"> - <a id="test1" href="javascript:;">Update</a>
<input id="Q_Star2_Text" type="text" name="starValue" value="Value Two"> - <a id="test2" href="javascript:;">Update</a>
<input id="Q_Star3_Text" type="text" name="starValue" value="Value Three"> - <a id="test3" href="javascript:;">Update</a>
<input id="Q_Star4_Text" type="text" name="starValue" value="Value Four">- <a id="test4" href="javascript:;">Update</a>
<input id="Q_Star5_Text" type="text" name="starValue" value="Value Five"> - <a id="test5" href="javascript:;">Update</a>

<p class="final-text">Replace This</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
  $("#test").on('click', function() {
    var inputVal = $("#Q_Star1_Text").val();
    $(".final-text").text(inputVal);
  });
</script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

以下是一个工作示例

$(".test111").on('click', function() {
  $("[name='starValue']").each(function() {
    var element = $("." + this.id);
    if (element.length) {
      element.html(this.value);
    } else {
      $("<p class='" + this.id + "'>" + this.value + "</p>").appendTo(".content");
    }
  });
});

input {
  display: block;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="content">
<input id="Q_Star1_Text" type="text" name="starValue" value="Value One">
<input id="Q_Star2_Text" type="text" name="starValue" value="Value Two">
<input id="Q_Star3_Text" type="text" name="starValue" value="Value Three">
<input id="Q_Star4_Text" type="text" name="starValue" value="Value Four">
<input id="Q_Star5_Text" type="text" name="starValue" value="Value Five">
<a class="test111" href="javascript:;">Update Text</a>
<p class="Q_Star1_Text">Replace This</p>
</div>

Answer 2

您可以收听click标记的a事件，点击后，使用input获取上一个prev()的值：

$("a[id^=test]").on('click', function() {
  var value = $(this).prev('input[id^=Q_Star]').val();
  $('.final-text').text(value);
});

input {
  display: block;
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="Q_Star1_Text" type="text" name="starValue" value="Value One"> - <a id="test1" href="javascript:;">Update</a>
<input id="Q_Star2_Text" type="text" name="starValue" value="Value Two"> - <a id="test2" href="javascript:;">Update</a>
<input id="Q_Star3_Text" type="text" name="starValue" value="Value Three"> - <a id="test3" href="javascript:;">Update</a>
<input id="Q_Star4_Text" type="text" name="starValue" value="Value Four">- <a id="test4" href="javascript:;">Update</a>
<input id="Q_Star5_Text" type="text" name="starValue" value="Value Five"> - <a id="test5" href="javascript:;">Update</a>

<p class="final-text">Replace This</p>

Answer 3

编辑：阅读更新后的说明。这是一个有效的解决方案。

更新了html：

<input id="Q_Star1_Text" type="text" name="starValue" value="Value One">
  <p class="replace">Replace This</p>
<input id="Q_Star2_Text" type="text" name="starValue" value="Value Two">
  <p class="replace">Replace This</p>
<input id="Q_Star3_Text" type="text" name="starValue" value="Value Three">
  <p class="replace">Replace This</p>
<input id="Q_Star4_Text" type="text" name="starValue" value="Value Four">
  <p class="replace">Replace This</p>
<input id="Q_Star5_Text" type="text" name="starValue" value="Value Five">
  <p class="replace">Replace This</p>
<a class="test111" href="javascript:;">Update Text</a>

工作js，简单有效：

  $(".replace").on('click', function() {
    var prevElem = $(this).prev().val();
    $(this).text(prevElem)
  });