Javascript 无法在放大弹出窗口的回调中获取当前元素id

我使用以下代码在单击时获取

的id

 jQuery('.speaker a').click(function(e){
            var currentID = jQuery(this).attr("id");
        })
        jQuery('.speaker a').magnificPopup({type: 'ajax',
            callbacks: {
              parseAjax: function(mfpResponse) {
                // mfpResponse.data is a "data" object from ajax "success" callback
                // for simple HTML file, it will be just String
                // You may modify it to change contents of the popup
                // For example, to show just #some-element:
                mfpResponse.data = $(mfpResponse.data).find('#performer1');

                // mfpResponse.data must be a String or a DOM (jQuery) element

                console.log('Ajax content loaded:', mfpResponse);
              },
              ajaxContentAdded: function() {
                // Ajax content is loaded and appended to DOM
                console.log(this.content);
              }
            }
        });

---

但是如何传递这个currentID呢？首先使用window.currentID创建变量不在单击事件内。让它成为全球性的

更改单击事件功能：

 jQuery('.speaker a').click(function(e){
                var currentID = jQuery(this).attr("id");
            }) 

最后更改如下行：

jQuery('.speaker a').click(function(e){
currentID = jQuery(this).attr("id");

        })

试试这个

全局声明变量

currentID

将

.find（'#performer1'）

替换为

.find（'#'+currentID）

这是更新后的代码

 mfpResponse.data = $(mfpResponse.data).find('#' +  currentID);

---

使用此代码可能会解决此问题

var currentID;
jQuery('.speaker a').click(function(e) {
  currentID = jQuery(this).attr("id");
});
jQuery('.speaker a').magnificPopup({
  type: 'ajax',
  callbacks: {
    parseAjax: function(mfpResponse) {
      // mfpResponse.data is a "data" object from ajax "success" callback
      // for simple HTML file, it will be just String
      // You may modify it to change contents of the popup
      // For example, to show just #some-element:
      mfpResponse.data = $(mfpResponse.data).find('#' + currentID);

      // mfpResponse.data must be a String or a DOM (jQuery) element

      console.log('Ajax content loaded:', mfpResponse);
    },
    ajaxContentAdded: function() {
      // Ajax content is loaded and appended to DOM
      console.log(this.content);
    }
  }
});

---

不要执行

$（this.attr（“id”）。这是jQuery过度使用的一个痛苦的例子。只需执行
this.id
。似乎您最终只需要查阅您正在使用的任何插件的文档。它告诉你如何访问
a
元素了吗？如果用户在响应返回之前单击了另一个链接怎么办？@Vishnu:现在你也弄坏了他的选择器。但后来他确实批准了，所以这只是一个WTF而已。@squint：请提及选择器的问题。谢谢@squint指出错误。也消除了我的疑虑。将答案更改回原始答案。：）为什么使用嵌套引号？这只是破坏了选择器。它将存储在currentID='#currentID'中，而不是currentID=#currentIDI know中。那是坏的。为什么选择器要在其周围加单引号？在find（）方法中，我们需要传递它所需的id。find（“#id”）这就是为什么。。它的元素不是它的id…您混淆了JS字符串文字分隔符的概念和字符串的内容。如果你想费心去测试一个看起来像这样的选择器，你会发现它不起作用。
var currentID;
jQuery('.speaker a').click(function(e) {
  currentID = jQuery(this).attr("id");
});
jQuery('.speaker a').magnificPopup({
  type: 'ajax',
  callbacks: {
    parseAjax: function(mfpResponse) {
      // mfpResponse.data is a "data" object from ajax "success" callback
      // for simple HTML file, it will be just String
      // You may modify it to change contents of the popup
      // For example, to show just #some-element:
      mfpResponse.data = $(mfpResponse.data).find('#' + currentID);

      // mfpResponse.data must be a String or a DOM (jQuery) element

      console.log('Ajax content loaded:', mfpResponse);
    },
    ajaxContentAdded: function() {
      // Ajax content is loaded and appended to DOM
      console.log(this.content);
    }
  }
});

jQuery('.speaker a').magnificPopup({type: 'ajax',
        callbacks: {
          parseAjax: function(mfpResponse) {
            // mfpResponse.data is a "data" object from ajax "success" callback
            // for simple HTML file, it will be just String
            // You may modify it to change contents of the popup
            // For example, to show just #some-element:
            var mp = $.magnificPopup.instance,
            t = $(mp.currItem.el[0]);

            var h=( t.data('custom') );

            mfpResponse.data = $(mfpResponse.data).find('#'+h);

            // mfpResponse.data must be a String or a DOM (jQuery) element

            console.log('Ajax content loaded:', mfpResponse);
          },
          ajaxContentAdded: function() {
            // Ajax content is loaded and appended to DOM
            console.log(this.content);
          }
        }
    });