Javascript 添加和删除唯一附加数据

我正在尝试为表控件的行添加按钮。它们每行只能出现一次。我有很多问题，确保按钮被删除，然后添加到一个新行如果点击，而不是删除，如果相同的行被点击，等等。几乎是一个切换，但在不同的元素之间

我有问题的地方，按钮是剩余的，按钮都消失了，按钮没有消失，等等。我真的很难控制这个

请查看我的小提琴：

检查

由于您是通过检查按钮组是否存在来指示是否应显示或删除按钮组，因此在单击另一行时，您只需删除按钮组。 若要修复此问题，请检查单击的行是否包含按钮组

---

我为tableTools提供了一个附加参数$row，并在其中搜索按钮组，然后决定是否删除或显示已分组的按钮。当然，在显示之前，旧按钮将被删除。

代码的简短版本如下所示。我相信，如果需要的话，它应该更容易调试和构建。此外，还包括tableToolsButtons的“占位符”-如果单击按钮，按钮不会闪烁或消失。在PlaceHolder处理程序中，您可以决定在使用按钮后是否隐藏按钮

function tableTools(){

    var addButton = '<button type = "button" class = "tableToolsButton addButton">ADD</button>';
    var infoButton = '<button type = "button" class = "tableToolsButton infoButton">INFO</button>';
    var editButton = '<button type = "button" class = "tableToolsButton editButton">EDIT</button>';
    var deleteButton = '<button type = "button" class = "tableToolsButton deleteButton">DELETE</button>';    
    var tableTools = '<div class = "tableTools">' + infoButton + editButton + deleteButton + '</div>';

    var that = $(this);
    if( $('.tableTools').length ) {
        $('.tableTools').fadeOut(100,function() {
            $(this).remove();
            that.append(tableTools).fadeIn(500);        
        });
    } else {
        $(this).append(tableTools).fadeIn(500);
    }
}

$(document).ready(function(){
    // div 1,2,3
    $('#wrapper').on('click', '#div1,#div2,#div3', tableTools)
    //tabletools buttons
    .on('click', '.tableToolsButton', function(e) {
        e.stopPropagation();
        //....
    });
});

如果控制是你想要的

然后你应该简化这个过程，把你的想法集中起来

var buttons = ['add','info','edit','delete'],//define buttons
    butts = '',//set up buttons output
    tt = 'tableTools';//button parent class

for (i = 0; i < buttons.length; i++) {//for each button
    butts += '<button type="button" class="tableToolsButton '+buttons[i]+'Button">'+buttons[i]+'</button>';//print output
}

var  output = '<div class="tableTools" style="display:none;">'+butts+'</div>';//store output

function tableTools(el){    
    var go = el.children('.'+tt).length,//does current one have buttons?
        tabs = $('.'+tt),//get buttons
        fo = 100,//fade out
        fi = 500;//fade in

    if (tabs.length && !go){//there are buttons, but not on this one
        tabs.fadeOut(fo).remove();//so remove the buttons
        el.append(output).children('.'+tt).fadeIn(fi);//and add them to current
    } else if (go) {//if there are buttons on current
        tabs.fadeOut(fo).remove();//remove them
    } else if (!go) {//if no buttons exist on current
        el.append(output).children('.'+tt).fadeIn(fi);//make them
    }

    //prevent on button click
    $('.tableToolsButton').on('click', function(e) {
        e.stopPropagation();
        //add code for buttons here
    });
}

$(document).ready(function(){
    $('#wrapper > div').on('click', function(){ tableTools($(this)); });//run on click
});

这样，编辑和维护就容易多了

---

谢谢但我不明白$row在做什么$row是一个对象，但我在函数中看不到在返回tableTools时如何应用它。编辑：哦，我将$this作为$row传递！我懂了。谢谢是的，很抱歉我错过了让桌面工具淡出的机会…我想你会自己得到那部分的。我很高兴能帮助你：哇。这么多的编码方法。有时我觉得编程有“风格”。这是一种风格还是仅仅是一种体验？这是为了让它更易于维护和理解。您需要编辑的内容越少，错误的范围就越小。你重复的次数越少，你的路径就越清晰。因此，通过定义你可能需要在操作之外更改的内容，你可以在不编辑操作代码的情况下进行更改。我只是想让事情变得简单，并努力确保代码操作能够被大声读出并且容易理解。这仍然有很大的改进空间，但至少对我来说，这是一条更清晰的道路。编码当然有不同的风格，它们只是在代码重构过某一点之前不会出现太多，这样你就可以看到他们思考如何将事情组合在一起的清晰道路。如果你发现自己不得不不止一次地输入同一个东西，那么停下来，先把事情想清楚。您以后将如何更改它，或者在其他地方重新使用它？您或其他可能需要编辑此内容的人如何理解6个月后发生的事情？与其说让我们先做A，然后做B，然后做C，…，不如想想让我们做X，它会处理A，B，C，。。。。

function tableTools(){

    var addButton = '<button type = "button" class = "tableToolsButton addButton">ADD</button>';
    var infoButton = '<button type = "button" class = "tableToolsButton infoButton">INFO</button>';
    var editButton = '<button type = "button" class = "tableToolsButton editButton">EDIT</button>';
    var deleteButton = '<button type = "button" class = "tableToolsButton deleteButton">DELETE</button>';    
    var tableTools = '<div class = "tableTools">' + infoButton + editButton + deleteButton + '</div>';

    var that = $(this);
    if( $('.tableTools').length ) {
        $('.tableTools').fadeOut(100,function() {
            $(this).remove();
            that.append(tableTools).fadeIn(500);        
        });
    } else {
        $(this).append(tableTools).fadeIn(500);
    }
}

$(document).ready(function(){
    // div 1,2,3
    $('#wrapper').on('click', '#div1,#div2,#div3', tableTools)
    //tabletools buttons
    .on('click', '.tableToolsButton', function(e) {
        e.stopPropagation();
        //....
    });
});

var buttons = ['add','info','edit','delete'],//define buttons
    butts = '',//set up buttons output
    tt = 'tableTools';//button parent class

for (i = 0; i < buttons.length; i++) {//for each button
    butts += '<button type="button" class="tableToolsButton '+buttons[i]+'Button">'+buttons[i]+'</button>';//print output
}

var  output = '<div class="tableTools" style="display:none;">'+butts+'</div>';//store output

function tableTools(el){    
    var go = el.children('.'+tt).length,//does current one have buttons?
        tabs = $('.'+tt),//get buttons
        fo = 100,//fade out
        fi = 500;//fade in

    if (tabs.length && !go){//there are buttons, but not on this one
        tabs.fadeOut(fo).remove();//so remove the buttons
        el.append(output).children('.'+tt).fadeIn(fi);//and add them to current
    } else if (go) {//if there are buttons on current
        tabs.fadeOut(fo).remove();//remove them
    } else if (!go) {//if no buttons exist on current
        el.append(output).children('.'+tt).fadeIn(fi);//make them
    }

    //prevent on button click
    $('.tableToolsButton').on('click', function(e) {
        e.stopPropagation();
        //add code for buttons here
    });
}

$(document).ready(function(){
    $('#wrapper > div').on('click', function(){ tableTools($(this)); });//run on click
});