Jquery传递变量到模态?使用bPopup.js

Question

我有一个简单的页面，我想要多个超链接。每个链接将指向相同的页面(test.php)，但包含一个唯一的变量。

Test.php将捕获变量并从数据库加载信息。这部分很好，问题是我如何将变量传递到模态页面?

我使用bPopup.js，并有这个工作按照这个小提琴

我使用的超链接是:

<a href="" id="my-button">LINKY</a>

我需要改变从例子'my-button'的id，我假设我需要使用一个类，因为我不能有每个超链接具有相同的id。

我想做的是:

<a href="" class="modal" datavalue="111">LINKY 1</a>
<a href="" class="modal" datavalue="222">LINKY 2</a>
<a href="" class="modal" datavalue="333">LINKY 3</a>
<a href="" class="modal" datavalue="444">LINKY 4</a>

但是我如何调用这个函数并传递数据值让它被发送到test。php呢?

类似于test.php?datavalue=111 etc

;(function($) {
    $(function() {
        $('#my-button').on('click', function(e) {
        e.preventDefault();
    $('#element_to_pop_up').bPopup({
        contentContainer:'.content',
        loadUrl: 'test.php' //Uses jQuery.load()
    });
});
});
})(jQuery);

Answer 1

试试这个:

$('.modal').on('click', function(e) {
    e.preventDefault();
    var data = $(this).attr("datavalue"); //Get your attribute
    $('#element_to_pop_up').bPopup({
        contentContainer:'.content',
        loadUrl: 'test.php?datavalue='+data //Pass via get
    });
});