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>");
        }
    });
});

如何在第二次点击时再次删除它？现在它只是在 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

尝试这个：

$('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 回答
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 回答