2

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

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

工作演示在这里..

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

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

我怎么能做到这一点,请任何人都可以帮我把...

谢谢

4

2 回答 2

4

要切换追加和删除,您可以使用dataclicked 元素的属性。它是一种更清洁的方法:

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

于 2013-07-27T07:26:29.190 回答
0

只需使用if开关来确定该表是否已经存在。我修改了你的小提琴来证明这一点:http://jsfiddle.net/m9ak9/6/

id在表格中添加了一个以使其更容易识别,但您也可以通过以下方式查找它:

var findTableInDiv = $('#newDiv').find('table');
于 2013-07-27T07:26:17.673 回答