Глобальная переменная между функциями "undefined"?

Question

Должен быть лучший способ сделать это, но я использую Magnific Popup вместе с функцией .onclick(), чтобы добавить всплывающее окно и назначить идентификатор 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  
}); 

Я пытаюсь добавить cardID к якорю с классом card-remove в функции magnificPopup.

Я бы предпочел не использовать глобальные переменные, но я попытался поместить функцию 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*/ });  

});