Question

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

Label Name   ------>  Edit button

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

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

目前我可以通过给所有按钮提供唯一ID来为单个div做到这一点现在我想要增强它未来说我将为所有标签/编辑/保存/创建三个具有相同类名的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

Answer 2

您可以使用此插件

Plugin link

Answer 3

我查看了您的代码，并且完全修复了错误并显示了代码的功能，这里有一个提示，可以帮助您了解自己想要做的事情。

提示：养成添加包装的习惯。

而不是：

<!-- 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 -->

您可以使用div包装每个标签，以创建层次结构级别并在每个项目之间创建边界，如下所示：

<!-- Label one -->
<div class="label-1 item-container">
    <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>
</div>
<!-- Label one -->

有些人使用列表项来解决这个问题，我觉得这也是有效的。我不确定使用列表项是否对SEO更好，但似乎也更有意义。

添加包装器并创建该边界将在以后希望脚本不影响其他项目时帮助您。

现在得到你想要的东西。有很多方法可以做你想做的事情，幸运的是，你想要实现的是jQuery的常见任务。

不是使用每个元素常用的选择器，而是使用jQuery＆＃39; s $.closest()和$.find()

您可以在this jsFiddle here

中执行此操作

在示例中，我为每个元素添加了包装器并使用了

$.closest()走向DOM | View Documentation for Closest

和

$.find()走下DOM | View Documentation for find

希望这个答案有所帮助！

使用JQuery内联编辑/保存/取消

3 个答案: