Question

我正在尝试在打开Magnific Popup时发送带有AJAX请求的data对象。但是，似乎$(this)未在插件中正确翻译。

考虑以下代码：

<div class="my-div">
  <a href="/path/to/file.php" data-name="John" data-location="Boston">Click here</a>
</div>

$('.my-div a').magnificPopup({
  type: 'ajax',
  ajax: {
    settings: {
      data: $(this).data()
    }
  }
});

未正确返回数据对象。但是，如果我用以下内容替换数据：

data: { name: "John", location: "Boston" }

然后我可以在$_GET中引用这些对象。

编辑：为了进一步说明$(this)内magnificPopup无法正常运作，我将数据线更改为：

data: { href: $(this).attr('href') }

仍未返回任何内容。

我所做的一切似乎都指向$(this)未在插件中受到尊重。如何从原始锚标记中获取data个对象并将其传递给AJAX请求？

Answer 1

$('.my-div a').magnificPopup({
      type: 'ajax',
      elementParse: function(item) {
           this.st.ajax.settings = item.el.data();
      }
});

Answer 2

我发现在请求中使用数据属性调用ajax响应的最佳方法是单击调用ajax请求而不是直接调用magnificpopup。然后只需将响应插入标准的内联mfp。

$('a.popup').magnificPopup({
    type: 'ajax',
    ajax: {
        settings: {
            type: "POST",
            url: '/ajax.php',
            data: {
                action : 'ajax_action',
                postid : this.currItem.el.data('id')
                // this doesn't actually work because 'this.currItem'
                // is only accessible in a callback
            }
        }
    }
});

请改为：

$('a.popup').click(function(){
    $.ajax({
        type: "POST",
        url: '/ajax.php',
        data: {
            action : 'ajax_action',
            postid : $(this).data('id'),
            //$(this).data() works because it's a standard AJAX call
        },
        success: function(data){
            $.magnificPopup.open({
                type: 'inline',
                items: {
                    src: data
                }
            })
        }
    });
});

Answer 3

你可以试试这个

data: { name:$(this).data('name'), location:$(this).data('location')  }

打开Magnific Popup时，在AJAX调用中包含$（this）.data（）

3 个答案: