代码之家 › 专栏 › 技术社区 › Andrew

jQuery:如何仅在未单击子元素时对父元素应用效果?

jquery

Andrew · 技术社区 · 15 年前

我试图创建一个“就地编辑”表单元格。单击编辑链接,文本区域将显示在其位置。我也只想在将鼠标悬停在表格行上时显示编辑链接。下面代码的问题是,当您将鼠标悬停在表行上时,编辑链接始终会出现。如何才能使隐藏/显示仅在您当前未编辑时发生。

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

查询:

$(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%;" />');
    });
});

4 回复 | 直到 15 年前

user113716 15 年前

我可能会做 hover 在CSS中。这里不需要javascript。如果你需要用这个特性来支持IE6,我会让javascript成为有条件的。

<tr> 在 click() 创建 <input> . CSS可以为 < 和全班同学一起。

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');
    });
});

netadictos 15 年前

例如,可以使用条件验证$('input',).length>0。

也就是说,验证输入文件是否已经存在。

我要说的是: http://jsfiddle.net/dactivo/L4zZw/

mpdonadio 15 年前

不是对你的问题的直接回答,但我过去曾成功地用绝地武士完成过同样的事情: http://www.appelsiini.net/projects/jeditable

Dan Manastireanu 15 年前

如果你的细胞是这样的,事情就会简单得多:

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

$('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 .