将点击元素的数据属性值传递给 ajax 设置答案

【问题标题】：Pass data-attribute value of clicked element to ajax settings将点击元素的数据属性值传递给 ajax 设置
【发布时间】：2013-05-30 21:50:51
【问题描述】：

对于 Magnific Popup 的实现，我需要将帖子 ID 传递给 ajax 设置。帖子 ID 存储在绑定 Magnific Popup 的元素的数据属性中。我希望这个工作：

html元素：

<a data-id="412">Clicke me</a>

Javascript：

$('.element a').magnificPopup({
  type: 'ajax',
  ajax: {
    settings: {
      url: php_array.admin_ajax,
      type: 'POST',
      data: ({
        action:'theme_post_example',
        id: postId
      })
    }
  }

});

其中 postId 是从 data 属性中读取的。

提前致谢。

【问题讨论】：

标签： magnific-popup

【解决方案1】：

$('.element a').magnificPopup({
    callbacks: {
        elementParse: function(item){
            postData = {
                action  :'theme_post_example',
                id      : $(item.el[0]).attr('data-id')     
            }
            var mp = $.magnificPopup.instance;
            mp.st.ajax.settings.data = postData;
        }
    },
    type: 'ajax',
    ajax: {
        settings: {
            url: php_array.admin_ajax,
            type: 'POST'
        }
    }
});

【讨论】：

有效，尽管我不得不使用 this.st.settings.el.data('data-id')

【解决方案2】：

这是怎么做的：

html：

<a class="modal" data-id="412" data-action="theme_post_example">Click me</a>

jquery：

$('a.modal').magnificPopup({
    type: 'ajax',
    ajax: {
        settings: {
            url      : php_array.admin_ajax,
            dataType : 'json'
        }
    },
    callbacks: {
        elementParse: function() {
            this.st.ajax.settings.data = {
                action : this.st.el.attr('data-action'),
                id     : this.st.el.attr('data-id')
            }
        }
    },
    parseAjax: function( response )
    {
        response.data = response.data.html;
    }
});

php

function theme_post_example()
{
    $id = isset( $_GET['id'] ) ? $_GET['id'] : false;

    $html = '<div class="white-popup mfp-with-anim">';

    /**
     * generate your $html code here ...
     */

    $html .= '</div>';

    echo json_encode( array( "html" => $html ) );

    die();
}

【讨论】：

如何在 php 弹出窗口中“回显”结果？

【解决方案3】：

由于这个答案是关于将数据插入 Magnific 的 ajax 调用的原始问题，因此我将在此处发布。经过数小时的尝试后，您应该知道如果您使用的画廊能够在画廊项目之间移动而不关闭弹出窗口，则使用elementParse 设置您的 AJAX 数据将失败，当您在查看项目后访问它（当弹出窗口仍然打开时）。

这是因为elementParse 包含在一个检查中，它会检测项目是否已被“解析”。以下是关于发生了什么的小解释：

在项目索引 2 处打开图库。
项目尚未被解析，因此它将已解析标志设置为true 并运行elementParse 回调（按此顺序）。你的回调设置了 ajax 选项来获取这个项目的数据，一切都很好。
移动（右）到项目索引 3。
同上。该项目尚未被解析，因此它运行回调。您的回调设置数据。它有效。
（左）移回项目索引 2。
这次项目已被解析。由于假定的潜在性能原因，它会跳过重新解析项目的元素。您的回调未执行。 Magnific 的 ajax 数据设置将保持与项目索引 3 相同。
- AJAX 调用使用旧设置执行，它返回项目索引 3 的数据，并呈现给用户。 Magnific 会认为它在索引 2 上，但它正在呈现索引 3 的数据。

要解决此问题，您需要挂钩始终在前 ajax 调用中执行的回调，例如 beforeChange。

主要区别在于当前项目没有传递到回调中。幸运的是，此时，magnific 已经更新了指向正确索引的指针。您需要使用以下方法获取当前项目的元素：

var data = {}; // Your key-value data object for jQuery's $.ajax call.

// For non-closures, you can reference mfp's instance using
// $.magnificPopup.instance instead of 'this'.
// e.g.
// var mfp = $.magnificPopup.instance;
// var itemElement = mfp.items[mfp.index].el;
var itemElement = this.items[this.index].el;

// Set the ajax data settings directly.
if(typeof this.st.ajax.settings !== 'object') {
    this.st.ajax.settings = {};
}
this.st.ajax.settings.data = data;

这个答案也可以用作当前最高投票的合适替代方案，因为它适用于任何一种方式。

【讨论】：

【解决方案4】：

您可以使用open public 方法动态打开弹窗http://dimsemenov.com/plugins/magnific-popup/documentation.html#public_methods

【讨论】：

请详细说明一下？

【解决方案5】：

postId = $(this).attr('data-id')

$(this) 检索当前元素（您点击的链接），并获取指定属性的值。

【讨论】：