magnific-popup 传递变量答案

【问题标题】：magnific-popup passing a variablemagnific-popup 传递变量
【发布时间】：2013-07-28 02:41:34
【问题描述】：

我正在尝试让magnific popup 包含一些表单。我想通过 html 锚点将变量传递给最终的弹出窗口。作为此伪代码中的 Var1：

<!-- HTML launcher element -->
<a href="#test-popup?Var1=X" class="open-popup-link">Show inline popup</a>

<!-- Popup itself -->
<div id="test-popup">
    <form method="post" action="">
        <input type="hidden" id="myVar" name="Var1" value="[placeholder]" />
        <input type="submit" />
    </form>
</div>

<!-- Inizialization -->
<script type="text/javascript">
    $(document).ready(function() {
        $('.open_popup_link').magnificPopup({
        type:'inline',
        midClick: true,

            function() {
                **Here some magic code that sets Var1 = X **
                $('#myVar').attr('value', function(i, attr){
                return attr.replace('[placeholder]', Var1);
                });}
        });
    });
</script>

我需要这个，因为我将生成服务器端（w. PHP）启动器，这样每个链接都会生成不同的表单数据。

编辑：我想到的一种方法是在启动器中使用自定义属性，例如：

<a href="#test-popup" data-var1="X" class="open-popup-link">Show inline popup</a>

但我无法真正获得正确的 jQuery 语法，用于在 magnific-popup 初始化中嵌套处理属性。我的 js/jquery 知识非常基础，感谢您的任何提示。

【问题讨论】：

标签： javascript jquery magnific-popup

【解决方案1】：

如何在 magnificPopup 设置之外使用单独的单击处理程序，该处理程序在单击链接时更改输入值，只需确保在初始化插件之前绑定它

HTML

按照正确的建议使用数据属性

<a href="#test-popup" data-var1="X" class="open-popup-link">Show inline popup</a>

Javascript

$('.open-popup-link').click(function(){
    $('#myVar').val($(this).data('var1'));
});

$('.open_popup_link').magnificPopup({
   type:'inline',
   midClick: true
});

【讨论】：

【解决方案2】：

试试：

Javascript/jQuery

<script type="text/javascript">
$(document).ready(function() {

    $('.open_popup_link').magnificPopup({
    type:'inline',
    midClick: true,

        function() {
            **Here some magic code that sets Var1 = X **
             Var1 = $('#myVar').val(); 
            });}
    });
});

不太清楚您使用 Var1 的目的是什么，但这就是您如何将输入中的值获取到全局 Var1 变量中。

如果我不明白您要正确执行的操作，请告诉我。

【讨论】：