Question

我尝试创建一个“就地编辑”表格单元格。单击编辑链接，文本区域将显示在其位置。当我将鼠标悬停在表格行上时，我也只想显示编辑链接。我使用以下代码时遇到的问题是，当您将鼠标悬停在表格行上时，编辑链接始终显示。我怎样才能使隐藏/显示只在您当前没有编辑时发生。

HTML：

<td><a class="edit">Edit</a> $100</td>

jQuery的：

$(document).ready(function(){

    $('a.edit').hide();

    $('tr').hover(
        function(){
            $(this).find('a.edit').show();
        },
        function(){
            $(this).find('a.edit').hide();
        }
    );

    $('a.edit').click(function(e){
        e.preventDefault();
        $(this).hide();
        $(this).after('<input type="text" style="width:100%;" />');
    });
});

Answer 1

在悬停功能中使用一个变量，用于控制何时处于编辑模式。

例如，您可以使用条件验证$（'input'，）。length＆gt; 0.

也就是说，验证它是否已存在输入。

在这里你有我说的话： http://jsfiddle.net/dactivo/L4zZw/

Answer 2

我可能会在CSS中使用hover。那里不需要javascript。如果您需要使用此功能支持IE6，我会使javascript成为条件。

然后在创建<tr>时向click()处理程序中的<input>添加一个类。 CSS可以使<tr>与类隐藏链接。

示例： http://jsfiddle.net/gmS46/

CSS

tr a.edit {
    display:none;
}
tr:hover a.edit {
    display:inline;
}
tr.hasInput a.edit {
    display:none;
}

的jQuery

$(document).ready(function(){
    $('a.edit').click(function(e){
        e.preventDefault();
        $(this).after('<input>').closest('tr').addClass('hasInput');
    });
});

Answer 3

不能直接回答您的问题，但我过去曾使用Jeditable成功完成同样的事情：http://www.appelsiini.net/projects/jeditable

Answer 4

如果您的细胞是这样的话，事情变得更加简单：

<td><a class="edit" href="#">Edit</a><span>$100</span></td>

需要的javascript：

$('tr').hover(
        function(){
            $(this).find('a.edit').show();
        },
        function(){
            var $a = $(this).find('a.edit');
            if (!$a.next().is('input'))
                $a.hide();
        }
    );

$('a.edit').click(function(){
    var $next = $(this).next();
    if ($next.is('input')){
        $('<span>').html($next.val()).replaceAll($next);
    } else {
        $('<input>').val($next.html()).replaceAll($next).focus();
    }
    return false;
});

您可以查看live jsFiddle example。

jQuery：如果仅在未单击子元素时将效果应用于父元素？

4 个答案: