jquery - 使用 JQuery 进行内联编辑/保存/取消

Question

我正在使用 Jquery 执行内联编辑操作。我有

Label Name   ------>  Edit button

当我点击编辑按钮时，标签名称将替换为输入文本框，编辑按钮将替换为保存和取消按钮。

 Input text   ------>  save and cancel button

目前我可以通过为所有按钮提供唯一 ID 来为单个 div 执行此操作，现在我想增强它 future 说我将为所有标签/编辑/保存/取消按钮创建三个具有相同类名的 div。

我将只为 input_text 使用唯一的 ID，我将为标签/编辑/保存/取消按钮保留相同的类名。如果我点击 Div1，我应该能够更新 Div1 的值，如果我点击 Div2，我应该能够更新 Div2 并且很快。

谁能帮我实现它谢谢

https://jsfiddle.net/qx69o1bd/18/

html

<!-- Label one -->
<div>
    <label class="name">
        <span>Label 1</span>
    </label>

    <input id='text_1' class='com_text' type='text' />  
</div>

<div>       
    <a href='#' class='edit'>
        <span>Edit</span>
    </a>

    <button class='save' type='submit'>Save</button>

    <button class='cancel' type='reset'>Cancel</button> 
</div>
<!-- Label one --> 
<br/>
<!-- Label two -->
<div>
    <label class="name">
        <span>Label 2</span>
    </label>

    <input id='text_2' class='com_text' type='text' />  
</div>

<div>       
    <a href='#' class='edit'>
        <span>Edit</span>
    </a>

    <button class='save' type='submit'>Save</button>

    <button class='cancel' type='reset'>Cancel</button> 
</div>
<!-- Label two -->
<br>
<!-- Label three -->
<div>
    <label class="name">
        <span>Label 2</span>
    </label>

    <input id='text_3' class='com_text' type='text' />  
</div>

<div>       
    <a href='#' class='edit'>
        <span>Edit</span>
    </a>

    <button class='save' type='submit'>Save</button>

    <button class='cancel' type='reset'>Cancel</button> 
</div>
<!-- Label three -->

JQuery

$(document).ready(function()
{
    $('.com_text').click(function()
    {
        var com_text = $(this).attr('id');
    });

    //Edit
    $('.edit').click(function()
    { 
        $(this).hide();
        $('.name').hide();
        $('.save,.cancel').show();
        $(com_text).val($('.name').text().trim()); 

    });

    //Cancel
    $('.cancel').click(function()
    { 
        $(this).hide();
        $('.name,.edit').show();
        $('.save').hide();
        $(com_text).hide();
        $(com_text).val('');

    });

    //Save
    $('.save').click(function()
    { 
        var sname = $(com_text).val().trim();

        var dataobj = {};
        dataobj.sid = $(this).attr('data-id');
        dataobj.sname = sname.trim();

        $.ajax(
        {
            type:"POST",
            dataType:"json",
            url:"pages/demo.php",
            cache: false,
            data: dataobj,
            success:function(response)
            {   
                $('.name').html(sname.trim());
                $('.name,.edit').show();
                $('.save,.cancel').hide();
                $(com_text).hide();
                $(com_text).val('');                                                            
            }
        });
    });
});

Answer 1

你好现在尝试这个js代码我有一些修改

 $(document).ready(function()
{
    $('.com_text').click(function()
    {
        var com_text = $(this).attr('id');
    });

    //Edit
    $('.edit').click(function()
    { 
        $(this).hide();

        $(this).parent().prev().find('.name').hide();
       $(this).parent().prev().find('input').show();
        $(this).next('.save').show();
        $(this).next().next('.cancel').show();

        $(com_text).val($('.name').text().trim()); 

    });

    //Cancel
    $('.cancel').click(function()
    { 
        $(this).hide();
        $(this).parent().prev().find('.name').show();
        $(this).parent().prev().find('input').hide();
        $(this).prev().hide();
        $(this).prev().prev().show();
        $(com_text).hide();
        $(com_text).val('');

    });

    //Save
    $('.save').click(function()
    { 

        var sname = $(this).parent().prev().find('input').val().trim();
   alert(sname);

 $(this).parent().prev().find('.name > span').text(sname);
        $(this).parent().prev().find('.name').show();
        $(this).parent().prev().find('input').hide();
        $(this).prev().show();
        $(this).next().hide();
        $(this).hide();


    //  var dataobj = {};
    //  dataobj.sid = $(this).attr('data-id');
    //  dataobj.sname = sname.trim();

    /*  $.ajax(
        {
            type:"POST",
            dataType:"json",
            url:"pages/demo.php",
            cache: false,
            data: dataobj,
            success:function(response)
            {   
                $('.name').html(sname.trim());
                $('.name,.edit').show();
                $('.save,.cancel').hide();
                $(com_text).hide();
                $(com_text).val('');                                                            
            }
        });*/
    });
});

Demo Jsfiddle

Demo 2