0

APIに基づくフォーラムページがあります。画像をクリックすると、トピックの本文が読み込まれます。

これは、トピックタイトルの下に本文テキストを追加するために使用するコードです。

$('img').click(function() {
    tid = $(this).parent().attr('id');
    $.ajax({
        url: 'ajax.php?tid=' + tid,
        success: function(data) {
            $('tr#' + tid).after("<tr><td colspan=\"7\">" + data + "</td></tr>");
        }
    });
});

2回目のクリックでこれを再度削除するにはどうすればよいですか？今のところ、TRの下に別のdivを追加するだけです。

4

3 に答える 3

1

挿入された要素のIDを入力して、その存在を確認できます

$('img').click(function() {
    var row = $(this).parent(), 
        tid = row.attr('id'),
        bodyId = tid+'-body', // new id based on tid
        body = $('#'+bodyId);

    if (body.length){ // if topic body exists
        body.remove(); // remove it
    } else { // otherwise add it
        $.ajax({
            url: 'ajax.php?tid=' + tid,
            success: function(data) {
                row.after('<tr id="' + bodyId + '"><td colspan="7">' + data + '</td></tr>');
           }
    });
    }
});
于 2012-12-21T00:22:40.397 に答える
0

まず、idで選択するときにafterを使用することはお勧めしません。なぜなら、afterはイテレータであり、本当に必要なのはhtml（）でinnerHTMLを設定することだけです。その周りに何らかの条件を設定できます。最も簡単なのはおそらくフラグです。

    $('img').click(function() {
         flag = false;
         oldHTML = "";
         tid = $(this).parent().attr('id');
         $.ajax({
              url: 'ajax.php?tid=' + tid,
              success: function(data) {
                  if !(flag){
                      oldHTML = $('tr#' + tid).html();
                      $('tr#' + tid).html(oldHTML+"<tr><td colspan=\"7\">" + data + "</td></tr>");
                      flag = true;
                  } else {
                      flag = false;
                      $('tr#' + tid).html(oldHTML);
                  }
              }
         });
     });

より良い方法は、次のようなものを使用して次のtrの内容を明示的にチェックすることです。

     if$('tr#' + tid).html().indexOf(data) != -1{

または、行を交互に事前書き込みしてから、.show（）と.hide（）を使用して表示を切り替えます。

于 2012-12-21T00:23:45.910 に答える
0

これを試して：

$('img').click(function() {
    var $this = $(this),
        $thisParentTr = $this.closest('tr'),
        tid = $thisParentTr.attr('id');
    if ($thisParentTr.next().hasClass('topic-added')) {
        $thisParentTr.next().remove();
    } else {
        $.ajax({
            url: 'ajax.php?tid=' + tid,
            success: function(data) {
                $thisParentTr.after("<tr class=\"topic-added\"><td colspan=\"7\">" + data + "</td></tr>");
            }
        });
    }
});​

ただし、再度クリックした場合に備えて、追加のリクエストを節約するために、呼び出されたら非表示にして表示することをお勧めします。

追加-これがjsFiddleで、新しいtrが存在するかどうかを確認し、新しくない場合はチェックすることをお勧めします。はいの場合は表示され、非表示になります。はいの場合は非表示になり、表示されます。片付けができるかもしれませんが、画像をクリックするだけで何度もajax呼び出しを行えるようにするよりも、これをお勧めします。

于 2012-12-21T00:21:39.200 に答える