Question

我正在尝试使用jQuery div将html添加到.next()，但我没有得到任何结果。

这是html部分：

<div class="widget widget_border">

  <h3 class="widget_border" id="widget_lot">Last opened tasks 
      <div class="dashboard_dd_arrow"></div>
  </h3>
  <div class="widget_content"></div>
</div>

和JavaScript：

(document).ready(function () {
  $('.widget h3').on('click', function () {
    if (!$.trim($(this).next('.widget_content').html())) {
      // if this widget don't have any data send ajax and load it

      var widget_id = $(this).attr('id');
      switch (widget_id) {
      case 'widget_lot':
        $.ajax({
          type: 'POST',
          url: '/dashboard/ajax_last_opened_tickets',
          data: {},
          success: function (data) {
            console.log(data);
            $(this).next('.widget_content').html('test');
          }
        });
        break;
      }
    } else {
      // show current one
      $(this).next('.widget_content').slideToggle().parent().toggleClass('active');
    }
  });
});

Ajax调用顺利，我得到了所需的数据，但.next()函数没有填充div widget_content类。

关于此的任何解决方案或想法？

谢谢。

Answer 1

尝试缓存ajax调用的$(this)引用，并在其成功回调中使用它。等，

 _this.next('.widget_content').html('test');

注意：上面代码中的_this仅用于演示目的。

Answer 2

您需要在子功能中备份此功能

$('.widget h3').on('click', function(){
    if( !$.trim($(this).next('.widget_content').html()) )
    {
        // if this widget don't have any data send ajax and load it

        var widget_id = $(this).attr('id');
        var _this = this; // backup this
        switch (widget_id) {
            case 'widget_lot':
                $.ajax({
                    type:'POST',
                    url: '/dashboard/ajax_last_opened_tickets',
                    data:{},
                    success:function(data){
                        console.log(data);
                        $(_this).next('.widget_content').html('test'); //edit here
                    }
                });
                break;
        }
    }
    else {
        // show current one
        $(this).next('.widget_content').slideToggle().parent().toggleClass('active');
    }
});

Answer 3

在你的AJAX函数中，$(this)不是你想象的那样，因为它指的是success function / ajax request。你应该这样做：

var $self = $(this);
$.ajax({
     type:'POST',
     url: '/dashboard/ajax_last_opened_tickets',
     data:{},
     success:function(data){
         console.log(data);
         $self.next('.widget_content').html('test');
     }
});

希望这有帮助。

Answer 4

$（this）内部成功指向当前方法而不是顶级方法。保存到变量。

( document ).ready(function() {
$('.widget h3').on('click', function(){
    var $this = $(this);
    if( !$.trim($this.next('.widget_content').html()) )
    {
        // if this widget don't have any data send ajax and load it

        var widget_id = $this.attr('id');
        switch (widget_id) {
            case 'widget_lot':
                $.ajax({
                    type:'POST',
                    url: '/dashboard/ajax_last_opened_tickets',
                    data:{},
                    success:function(data){
                        console.log(data);
                        $this.next('.widget_content').html('test');
                    }
                });
                break;
        }
    }
    else {
        // show current one
        $this.next('.widget_content').slideToggle().parent().toggleClass('active');
    }
});
});

jQuery .next（）不起作用，元素保持为空

4 个答案: