使用输入值更新 DIV 的文本答案

【问题标题】：Update text of DIV with input value使用输入值更新 DIV 的文本
【发布时间】：2010-09-14 00:25:40
【问题描述】：

我正在尝试更新具有多个输入按钮的 div 的文本。当输入按钮被点击时，按钮的值应该被传递给 div 并替换 div 中的文本。

它基本上是一个下拉菜单，当用户点击一个选项时它会关闭。出于显而易见的原因，我希望按钮的名称替换默认的“选择一个”。

结构如下：

                    <div class="button_slide" rel="slide1">Choose one</div>
                    <div class="content_slide slide1">
                        <input id="ButtonCake" class="button_vertical special_button" type="button" value="Cake" size="10px" />
                        <input id="ButtonNoCake" class="button_vertical special_button" type="button" value="No Cake" />                                                                            
                    </div>

因此，当用户单击蛋糕时，我希望将“选择一个”更改为“蛋糕”。我有这些领域的战利品，所以一个真正通用的 jQuery 解决方案会很棒。感谢阅读。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

$(".button_vertical").click(function() {
   $(".button_slide").text($(this).val());
});

如果您有多个 .button_slide div，请给它们 ID，或者更好 - 使用父级 <div> 并使用：$(this).parent().children(".button_slide")

【讨论】：

是否需要该事件？为什么总比没有好？ :)

【解决方案2】：

$('button').click(function(){
  $('.button_slide').text($(this).val());
})

应该这样做

【讨论】：

它是 val() 而不是 value()

【解决方案3】：

$('input').click(function() {
  var new_val = $(this).val();
  $('.button_slide').val(new_val);
});

【讨论】：

【解决方案4】：

您将需要实现click() 函数并使用text() 函数将您想要的值传递给button_slide

$(".special_button").click(function(e) {
   $(".button_slide").text($(this).val());
});

参考文献

【讨论】：

【解决方案5】：

<div class="button_slide" rel="slide1" id="sld">Choose one</div>
<div class="content_slide slide1">
<script language="javascript">

var buttonArr = new Array("Cake","No Cake");
for(var i=0;i<buttonArr.length;i++){
 document.write(" <input onclick='showvalue(this.value)' class='button_vertical special_button' type='button' value='"+buttonArr[i]+"' />")
}
function showvalue(value){
 document.getElementById("sld").innerHTML = value;
}
</script>
</div>

【讨论】：