Question

我有一个基于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。

Answer 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>');
           }
    });
    }
});

Answer 2

试试这个：

$('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调用。

Answer 3

首先，我不推荐在使用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（）切换其显示。

删除第二次单击时添加了json请求

3 个答案: