jQuery onclick使用ID'将文本框值添加到div

时间:2014-06-26 12:22:52

标签: javascript jquery

我正在尝试将一些文本框值添加到其他一些div中。 我想要获得的是这样的事情:

textbox id = "text-box-name-1"   ----> div id = "div-name-1"
textbox id = "text-box-name-2"   ----> div id = "div-name-2"
textbox id = "text-box-name-3"   ----> div id = "div-name-3"
and so on....

我该怎么做?请注意,div和文本框的数量是动态生成的。!

任何建议都会非常感激。 感谢

修改

 function test() {
            var rooms = $("#howmanyrooms").val();
            var roomcounter = 1;

            for (var i = 0; i < rooms; i++) {
                $("<div class='appendeddiv'>Room-" + roomcounter++ + "</div>").appendTo(".housecontainer");
                $("<span>Room-" + roomcounter + " name</span>&nbsp;<input type='text' placeholder='name' id='room-" + roomcounter + "-id'></div></br>").appendTo(".infoncontainer");
            };
            if ($('.housecontainer').find('.appendeddiv').length) {
                $("#buttonaddrooms").hide();
            }
        };

我已经有了这个代码,它允许我创建尽可能多的div和文本框,就像我在文本框中键入值一样。

现在,我希望能够设置,例如作为div标题,文本框中的用户类型,以及我迄今为止想到的唯一方法是使用由代码动态生成的id我已经拥有了。

1 个答案:

答案 0 :(得分:0)

感谢您编辑帖子......

我建议首先在Textbox和Div中添加一个类作为标识符,以便我们可以在jQuery的帮助下附加事件

$("<div class='appendeddiv targetDiv_"+ roomcounter +"'>Room-" + roomcounter + "</div>").appendTo(".housecontainer");
$("<span>Room-" + roomcounter + " name</span>&nbsp;<input type='text' placeholder='name' id='room-" + roomcounter + "-id' lang='textInput' class='targetText_"+ roomcounter +"'></div></br>").appendTo(".infoncontainer");

之后,以下脚本将执行操作:)

<script type='text/javascript>
$(function(){
    $("input.textInput").on("keyup",function(){
    var target = $(this).attr("lang").replace("Text", "Div");
    $("."+target).text($(this).val());
  });
});
</script>

根据你的小提琴如果你想更新值mannualy onclick任何按钮然后写这个方法。

<script type='text/javascript'>
function update(){
   $("input.textInput").each(function(){
     var target = $(this).attr("lang").replace("Text", "Div");
     $("."+target).text($(this).val());
   });
}
</script>