點擊編輯使用jQuery的多個表單字段？

Question

我有一種形式和字段是名字，姓氏，電子郵件，國家，編輯圖標和提交和取消按鈕。

當用戶點擊編輯圖標（右上角）時，所有值將顯示在文本框中，並且國家/地區將顯示在選擇下拉菜單中。

我試過一些代碼，但我得到的所有值在單個字段和值顯示多次。

你能幫我嗎？

$('#edit').click(function() { 
 
var text = $('.text-info').text(); 
 
var input = $('<input id="attribute" type="text" value="' + text + '" />') 
 
$('.text-info').text('').append(input); 
 
input.select(); 
 
$('.btn').show(); 
 
$('#edit').hide(); 
 
});

.width-400{width: 400px;margin: 0 auto;padding: 20px;} 
 
.border{border:1px solid #000;} 
 
input{margin-bottom: 10px; width: 100%;} 
 
    .btn{display:flex;margin-top: 10px;display: none;} 
 
    .font-icon{text-align: right;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<div class="border width-400"> 
 
\t <div class="font-icon"><a class="edit" href="#" id="edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a></div> 
 
\t <form method="post" action="update.php"> 
 
<div class="form-group"> 
 
    <label for="fname" class="control-label">Firstname:</label><spa class="text-info">Narendra</span> 
 
</div> 
 

 
<div class="form-group"> 
 
    <label for="lname" class="control-label">Lastname:</label><span class="text-info">verma</span> 
 
</div> 
 

 
<div class="form-group"> 
 
    <label for="email" class="control-label">Email:</label><span class="text-info">abc@gmail.com</span> 
 
</div> 
 
    <select> 
 
\t \t \t <option value="">Choose country</option> 
 
\t \t \t <option>India</option> 
 
\t \t \t <option>USA</option> 
 
\t \t \t <option>UK</option> 
 
\t \t </select> 
 
\t <div class="btn"> 
 
\t \t <input type="submit" name="submit" value="save"> 
 
\t \t <input type="submit" name="submit" value="cancel"> 
 
\t </div> 
 
    </form> 
 
</div>

Answer 1

$('#edit').click(function() { 
 
    var text = $('.text-info').each(function (index,oneSpan){ 
 
       var input = $('<input type="text" value="' + $(oneSpan).text() + '" />') 
 
    $(oneSpan).text('').append(input); 
 
}); 
 
    
 

 
var country = $('.select-info').text(); 
 
    $('.select-info').hide(); 
 
    $('#select-elm').val(country).show(); 
 
$('.btn').show(); 
 
$('#edit').hide(); 
 
    });

.width-400{width: 400px;margin: 0 auto;padding: 20px;} 
 
.border{border:1px solid #000;} 
 
input{margin-bottom: 10px; width: 100%;} 
 
    .btn{display:flex;margin-top: 10px;display: none;} 
 
    .font-icon{text-align: right;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<div class="border width-400"> 
 
\t <div class="font-icon"><a class="edit" href="#" id="edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a></div> 
 
\t <form method="post" action="update.php"> 
 
<div class="form-group"> 
 
    <label for="fname" class="control-label">Firstname:</label><span class="text-info">Narendra</span> 
 
</div> 
 

 
<div class="form-group"> 
 
    <label for="lname" class="control-label">Lastname:</label><span class="text-info">verma</span> 
 
</div> 
 

 
<div class="form-group"> 
 
    <label for="email" class="control-label">Email:</label><span class="text-info">abc@gmail.com</span> 
 
</div> 
 
<div class="form-group"> 
 
    <label for="country" class="control-label">Country:</label><span class="select-info">USA</span> 
 
</div> 
 
    <select id="select-elm" > 
 
\t \t \t <option value="">Choose country</option> 
 
\t \t \t <option>India</option> 
 
\t \t \t <option>USA</option> 
 
\t \t \t <option>UK</option> 
 
\t \t </select> 
 
\t <div class="btn"> 
 
\t \t <input type="submit" name="submit" value="save"> 
 
\t \t <input type="submit" name="submit" value="cancel"> 
 
\t </div> 
 
    </form> 
 
</div>

現在你錯過了什麼，你是選擇具有這一切節點，因此必須返回數組的調用的王 第一$('.text-info')方法text()就可以將它們連接起來，這樣你就得到了一個字符串與所有的價值觀。 在你創建你輸入之後，再輸入$('.text-info').text('').append(input);只是由text方法返回的另一個數組，所以追加的一個將在你結束的所有元素中執行，並且在最後一個輸入中包含一個長字符str，並附加在所有的跨度中。

我們所做的

我們正在從$（「文字信息」）的數組就叫它each(function(){}我們將通過一個讓我們所有的跨接一個。因此，只需創建一個輸入，即可從我們的ONE SPAN中獲取值。清空這一個，只是推你的陣列吧