我正在尝试阅读input
的值并在P
标记中更新它,值将是动态的。
更新,值应在段落下方替换
input {
display: block;
margin-bottom: 10px;
}

<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;
答案 0 :(得分: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>
答案 1 :(得分:1)
您可以收听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>
答案 2 :(得分:0)
编辑:阅读更新后的说明。这是一个有效的解决方案。
更新了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)
});