Question

我希望构建一个jquery插件，将链接转换为隐藏的表单并填充一些字段。该表单将用于将json数据发布到后端的方法。该课程开始工作，我可以设置自定义设置。问题是当我在每个页面上需要多个导出时，设置仅使用最后一次迭代。请参阅下文以获得更多说明。

使用类初始化插件并添加处理链接

$(".export-csv").exportCSV({
    link: '{$base_url}ajax/export-csv'
});

这里我有两个用于导出数据的链接。我通过标题和数据（聪明的模板系统）

<li>
    <a href="#" class="export-csv"
        data-title='Landlords'
        data-data='{$landlords_json}'>Export Landlords (CSV)</a>
</li>
<li>
    <a href="#" class="export-csv"
        data-title='Buyers'
        data-data='{$buyers_json}'>Export Buyers (CSV)</a>
</li>

当我点击任一按钮时，它会给我买家导出，因为它是最新的循环。当我检查页面时，表单显示正确的数据。它必须是被捕获的settings.title和settings.data。我可以看到它由于循环中的位置，但我不确定如何解决这个问题。

(function($) {

    $.fn.exportCSV = function ( options ) {

        var settings = $.extend({
            title: null,
            data: null,
            link: '/',
            link_text: 'Export (CSV)',
        }, options);

        return $(this).each( function () {
            settings.title = $(this).data('title');
            settings.data = JSON.stringify( $(this).data('data') );

            var hidden_form = "<form id='" + settings.title.toLowerCase() + "-export-csv' action='" + settings.link + "' method='POST' style='display: none;'>" +
                    "<input type='hidden' name='title' value='" + settings.title + "'>" +
                    "<input type='hidden' name='data' value='" + settings.data + "'>" +
                "</form>";
            $(this).append(hidden_form);

            $(this).on('click', function () {
                console.log( $(this) );
                event.preventDefault();
                $('#' + settings.title.toLowerCase() + '-export-csv').submit();
            });
        });
    }

}(jQuery));

使jquery插件适用于多个实例

0 个答案: