Question

我想删除td的下一个td of mouseenter。但我的代码删除了td和当前mouseover td的第一次出现的mouseenter。我的代码在这里。这段代码中有什么错误？

 $(document).on("mouseenter ", "td.content" , function(e) {     
        var ParentTdRemove = $(this).closest('td');         
        if( $(this).hasClass("content")){
            $('#addexpandtd').show();
            var top_pos = $(this).position().top;
            var left_post = $(this).position().left;    
            $('#addexpandtd').css('position', 'absolute');
            top_pos = top_pos-25;
            $('#addexpandtd').css('top',top_pos); 
            $('#addexpandtd').css('left', left_post);

            $(document).on("click", ".removetbletdimg" , function(e ) {
                   ParentTdRemove.remove(); 
                   return false;
            }); 

            $(document).on("click", ".expandtdimg" , function(e ) {  
                if(ParentTdRemove.next('td').is('.addtd')==false){
                    ParentTdRemove.next('td').remove();
                }
            });
       }

}).on('mouseleave',"td.content" , function() {
 $("#addexpandtd").hide();
});

我的HTML是

<table class="dynmictable">
<tbody>
    <tr>
        <td class="ui-droppable ui-sortable content tbledata"></td>
        <td class="ui-droppable ui-sortable content tbledata"></td>
        <td class="ui-droppable ui-sortable content tbledata"></td>
        <td class="addtd"><img src="images/plus_td.png" class="" id="addtditem"></td>
    </tr>
</tbody>
</table>

<div id="addexpandtd" style="display: block; position: absolute; top: 232.375px; left: 381.25px;">
    <img src="images/expand.png" class="expandtdimg">
    <img src="images/Close-icon.png" class="removetbletdimg" id="">
</div>

Answer 1

closest用于在dom树上搜索，除了嵌套表之外你不在这种情况下，我想你想要当前的td。

因此，您可以在当前元素上设置一个类，并使用该类在按钮单击时搜索当前元素或其下一个元素。

通过这种方式，您可以避免使用ParentTdRemove，并且可以附加一个点击处理程序，并且不会在每次鼠标悬停时将其绑定。

代码：

$(document).on("mouseenter ", "td.content", function (e) {    
    if ($(this).hasClass("content")) {
        $('#addexpandtd').show();
        var top_pos = $(this).position().top;
        var left_post = $(this).position().left;
        $('#addexpandtd').css('position', 'absolute');
        top_pos = top_pos - 25;
        $('#addexpandtd').css('top', top_pos);
        $('#addexpandtd').css('left', left_post);

        $('td.content').removeClass('current');
        $(this).addClass('current');
    }

}).on('mouseleave', "td.content", function () {
    $(this).removeClass('current');
    $("#addexpandtd").hide();
});

$(document).on("click", ".removetbletdimg", function (e) {
    $('td.content.current').remove();
    return false;
});

$(document).on("click", ".expandtdimg", function (e) {
    if ($('td.content.current').next('td').is('.addtd') == false) {
        $('td.content.current').next('td').remove();
    }
});

演示：http://jsfiddle.net/f694s1bb/

在鼠标输入事件中删除下一个td

1 个答案: