函数之间的全局变量“未定义”？

Question

必须有更好的方法来做到这一点，但我使用Magnific Popup和.onclick（）函数来追加一个弹出窗口，并将一个ID分配给一个div。这里是我的代码

var cardID; 

$('.popup-with-zoom-anim').click(function(){ 
    var cardID = jQuery(this).attr("id"); 
    console.log(cardID); 
}); 

$('.popup-with-zoom-anim').magnificPopup({ 
    items: { 
    src: $('<div id="small-dialog" class="white-popup zoom-anim-dialog mfp-hide"><h1>Delete card?</h1><p>Are you sure you want to delete this payment option? This operation cannot be undone.</p><a href="#" class="card-remove" id="' + cardID + '"><i class="fa fa-globe"></i>Yes</a><a href="#"><i class="fa fa-globe"></i>Cancel</a></div>'), 
    type: 'inline' 
}, 
     closeBtnInside: true  
}); 

我试图在magnificPopup函数中追加cardID到锚与类card-remove。

我不想使用全局变量，但我试过将magnificPopup函数放入onclick，但它没有我想要的功能。

谢谢您的时间

Answer 1

您可以使用elementParse event反而得到CardId中上点击：

$('.popup-with-zoom-anim').magnificPopup({ 
 
    items: { 
 
    src: $('<div id="small-dialog" class="white-popup zoom-anim-dialog"><h1>Delete card?</h1><p>Are you sure you want to delete this payment option? This operation cannot be undone.</p><a href="#" class="card-remove" id="cardID"><i class="fa fa-globe"></i>Yes</a><a href="#"><i class="fa fa-globe"></i>Cancel</a></div>'), 
 
    type: 'inline' 
 
    }, 
 
    closeBtnInside: true, 
 
    callbacks: { 
 
    elementParse: function(item) { 
 
     console.log(this.ev.attr('id')); 
 
     item.src.find('a[class="card-remove"]').attr('id', this.ev.attr('id')); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css"> 
 
<script src="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.min.js"></script> 
 

 
<button type="button" id="myBtn" class="popup-with-zoom-anim">Open Magnific PopUp</button>

Answer 2

每当你需要传递到的插件的最简单的方法是each循环内初始化选项特定元素的数据....即使只有一个这样的元素存在。

在each您可以访问元素实例

$('.popup-with-zoom-anim').each(function(){ 

    var cardID = this.id; 
    $(this).magnificPopup({/* same options as in question*/ });  

});