jquery - 用输入字段替换spans

时间:2016-04-07 16:06:07

标签: jquery

所以我有多个SPAN元素,每个元素都有输入字段。  当我点击SAVE按钮时,我认为输入字段数据将替换SPAN数据(根据右边的div框-1或2)。

<a href="#" id="save-edit-button" data-attr="box2">SAVE</a>

<div id="box1-edit-area" >
    <li><span id="website" class="edit-text" style="display: inline; ">www.site.com</span>
        <input type="text" value="www.site.com" class="edit-input" id="website_input" >
    </li>

    <li><span id="first" class="edit-text" style="display: inline; ">first name</span>
        <input type="text" value="Roi" class="edit-input" id="first_input" >
    </li>
</div>  

<div id="box2-edit-area" >
    <li><span id="phone" class="edit-text" style="display: inline; ">97542668</span>
        <input type="text" value="97542668m" class="edit-input" id="phone_input" >
    </li>

    <li><span id="city" class="edit-text" style="display: inline; ">Paris</span>
        <input type="text" value="Paris" class="edit-input" id="city_input" >
    </li>
</div>

SCRIPT

$(document).ready(function()
{
    $(document).on('click', "#save-edit-button", function ()
    {
        DATA INSIDE THE INPUT FIELD SHOULD REPLACE THE RELEVANT SPAN
    });
});

1 个答案:

答案 0 :(得分:0)

$("#save-edit-button").click(function() {
  $("#box1-edit-area li input[type=text]").each(function() {
    $(this).prev().text($(this).val());
  });
});

使用上面的代码,看它是否有效。

这里发生了什么!

$("#save-edit-button")上使用点击事件。

循环所有input[type=text] within li,检查prev标记并在其下添加当前input[text]的值。