Jquery 在附加和删除之间切换无法按我的预期工作

Question

以下追加和删除之间的切换不起作用:

$('.t').click(function() {
            var className = $(this).data('class');
            $(this).toggleClass(className).toggleClass(className+'1');

            var newTable='<table style="font-size: 14;float:left;padding-left: 13px;" cellpadding="5"><tr><td style="color: #B2B2B9;">T1</td></tr><tr><td id="cap">20</td></tr><tr><td id="minseat">8</td></tr></table>';
            $("#newDiv").append(newTable).remove(newTable);
        });

HTML

 <div class="t a" data-class="a"> 8cghfghfghfghfg</div>
 <div class="t b" data-class="b">20cghfghfghfghfg</div>
 <div class="t c" data-class="c"> 4cghfghfghfghfg</div>

 <div id="newDiv"></div>

Working Demo Here..

在这里，我想做的是..如果我单击 div.t，我想删除特定的类(例如:.a)并添加相应的类(例如.a1)，我实现了这一点。

但是我想在第一次单击时添加一个表格，想在第二次单击时删除该添加的表格。

我怎样才能做到这一点，请任何人帮我把...

谢谢

Answer 1

要切换追加和删除，您可以使用单击元素的 data 属性。这是一种更干净的方法:

    $('.t').click(function () {
        //general stuff must happen everytime class is clicked
        //get the className from data- attr
        var className = $(this).data('class');
        //toggling to change color
        $(this).toggleClass(className).toggleClass(className + '1');

        //check if its clicked already using data- attribute
        if ($(this).data("clicked")) {
            //remove it if yes
            $("#newDiv").find("#tablefor-" + className).remove();
        } else {
            //new table - note that I've added an id to it indicate where it came from
            var newTable = '<table id="tablefor-' + className + '" style="font-size: 14;float:left;padding-left: 13px;" cellpadding="5"><tr><td style="color: #B2B2B9;">T1' + className + '</td></tr><tr><td id="cap">20</td></tr><tr><td id="minseat">8</td></tr></table>';

            //append table                
            $("#newDiv").append(newTable);
        }
        //reverse the data of clicked
        $(this).data("clicked", !$(this).data("clicked"));
    });

演示:http://jsfiddle.net/hungerpain/m9ak9/11/