Question

这是我的jQuery代码，用于添加div中的帖子生成的html。 slidedown（）函数似乎不正常。这是我的剧本：

$(".expand").click(function(){
      var button = $(this);
      var id = $(this).attr("eid");
      var url = "/get-complete/" + id + '/';
      $.ajax({  
        type: "GET", 
        url: url,  
        success: function( data ) { 
          var obj = $.parseJSON(data);
          var lang = '';
          $.each(obj, function() {
            lang += this['html'] + "<br/>";
          });
          button.siblings('.comment-expand').slideDown('slow', function(){
            button.siblings('.comment-expand').html(lang);
          }); 
          button.attr('class', 'collapse');
          button.html('Collapse');
        }, 
      });
      return false;
    });

这是html：

<a class="expand" href="/#" eid="{{ event.id }}">Expand</a>

<div class="comment-expand"></div>

这是GET请求返回的示例数据：

[{"html": "\n    <div class=\"comment-count-bar\">\n</div>\n    "}]

这是折叠帖子的代码，但这也不起作用：

$("body").delegate(".collapse", "click", function(){
          var button = $(this);
          button.siblings('.comment-expand').slideUp('slow');
          button.attr('class', 'expand');
          button.html('Expand');
          return false;
        });

Answer 1

试试这个：

$.ajax({  
    type: "GET", 
    url: url,
    // setting the dataType to json, jQuery itself parses the response 
    dataType: 'json', 
    success: function(data) {  
      // Hiding the element and setting it's innerHTML 
      // before calling slideDown()
      button.siblings('.comment-expand').hide().html(function() {
         // Mapping the response and concatenating `html` properties
         // If the response has only one array use:
         // return data[0].html + '<br>'; instead
         return $.map(data, function(v) {
             return v.html + '<br>';
         }).join('');
      }).slideDown(); 
      button.addClass('collapse')
            .removeClass('expand')
            .html('Collapse');
    }, 
});

编辑：由于您要动态添加类，因此您应该委派事件：

$(document).on('click', '.collapse', function() {
    // var button = $(this);
    // ...
});

.slideDown（jQuery）不能正常工作

1 个答案: