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) を追加したいのですが、これは私が達成したものです。

しかし、最初にクリックしたときにテーブルを追加したい、2回目にクリックしたときに追加したテーブルを削除したい。

どうすればこれを達成できますか、誰か助けてください...

ありがとう

4

2 に答える 2

4

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/

于 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 に答える