將文本名稱附加到每個輸入

Question

我嘗試動態添加輸入。 但是，我添加的每個輸入都是沒有名稱的空白。

 $(document).ready(function() { var moreUploadTag = ''; $('#attachMore').click(function() { moreUploadTag += '<input type="text"/>'; jQuery(moreUploadTag).detach().appendTo("#boxed"); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div id="boxed"> <input type="text" name="" /> </div> <p id="attachMore">attachMore</p>

我將它留空而沒有名稱的目的是我想動態創建名稱：

 $('#addName').click(function(){ //$('input').attr("name", $(this).attr("name") + "test"); var named = $('input').val(); $('input').attr("name", $('input').attr("name") + named); }); $(document).ready(function() { $('#attachMore').click(function() { var moreUploadTag = ''; moreUploadTag += '<input type="text"/>'; jQuery(moreUploadTag).detach().appendTo("#boxed"); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="boxed"> <input type="text" name="" /> </div> <p id="attachMore">attachMore</p> <p id="addName">addName</p>

但是，它為所有輸入添加了名稱。

我的問題是如何為每個輸入添加名稱輸入？

在此先感謝您的幫助。 干杯。

Answer 1

你在尋找這樣的東西嗎？

 $('#addName').click(function(){ $('input').each(function(){ var input = $(this); input.attr("name", input.val()); }); }); $(document).ready(function() { $('#attachMore').click(function() { var moreUploadTag = ''; moreUploadTag += '<input type="text"/>'; jQuery(moreUploadTag).detach().appendTo("#boxed"); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="boxed"> <input type="text" name="" /> </div> <p id="attachMore">attachMore</p> <p id="addName">addName</p>

Answer 2

我認為問題是您需要告訴 jquery 什么名稱與什么輸入對應。

 var inputHtml = '<div class="inputGroup"><input type="text" /><button class="addName">add name</button></div>'; var yourname = 'allen'; $('.body').on('click', '.addInput', function() { $('.target').prepend(inputHtml); }); $('.body').on('click', '.addName', function() { if($(this).siblings('input').length) { $(this).siblings('input').attr('name', yourname); // debug alert($(this).parent().children('input').attr('name')); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="body"> <div class="target"></div> <button class="addInput">add input</button> </div>