Javascript 如何使放大弹出窗口打开内联库中的选定项目？_Javascript_Jquery_Magnific Popup

Javascript 如何使放大弹出窗口打开内联库中的选定项目？

javascript jquery

Javascript 如何使放大弹出窗口打开内联库中的选定项目？,javascript,jquery,magnific-popup,Javascript,Jquery,Magnific Popup,我正在使用显示一个内联库（带有自定义HTML标记），与示例完全相同。这将打开一个自定义标记库，您可以在其中单击3组化身/名称/位置数据。（试试下面的例子或代码，你就会明白我的意思）但是，我找不到一种方法在锚点击时打开第二个（或第一个之外的任何东西）元素除了第一个元素外，是否有人使用过并且能够打开其他内联元素？ HTML: <button style="padding:20px;">Open popup</button> .white-popup { positi

我正在使用显示一个内联库（带有自定义HTML标记），与示例完全相同。这将打开一个自定义标记库，您可以在其中单击3组化身/名称/位置数据。（试试下面的例子或代码，你就会明白我的意思）

但是，我找不到一种方法在锚点击时打开第二个（或第一个之外的任何东西）元素

除了第一个元素外，是否有人使用过并且能够打开其他内联元素？

HTML:

<button style="padding:20px;">Open popup</button>

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 200px;
  margin: 20px auto;
  text-align: center;
}

// Define data for the popup
var data = [
  {
    username: "Brad Frost", // Key "username" means that Magnific Popup will look for an element with class "mfp-username" in markup and will replace its inner HTML with the value.
    userWebsite_href: 'http://www.bradfrostweb.com', // Key "userWebsite_href" means that Magnific Popup will look for an element with class "mfp-userWebsite" and will change its "href" attribute. Instead of ending "href" you may put any other attribute.
    userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1561258552/brad_frost_bigger.png', // Prefix "_img" is special. With it Magnific Popup finds an  element "userAvatarUrl" and replaces it completely with image tag.
    userLocation: 'Pittsburgh, PA'
  },
  {
    username: "Paul Irish",
    userWebsite_href: 'http://paulirish.com',
    userAvatarUrl_img: 'https://si0.twimg.com/profile_images/2910976341/7d972c32f3882f715ff84a67685e6acf_bigger.jpeg',
    userLocation: 'San Francisco'

  },

  {
    username: "Chris Coyier",
    userWebsite_href: 'http://css-tricks.com',
    userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1668225011/Gravatar2_bigger.png',
    userLocation: 'Palo Alto, California'
  }
];

// initalize popup
$('button').magnificPopup({ 
  key: 'my-popup', 
  items: data,
  type: 'inline',
  inline: {
    // Define markup. Class names should match key names.
    markup: '<div class="white-popup"><div class="mfp-close"></div>'+
              '<a class="mfp-userWebsite">'+
                '<div class="mfp-userAvatarUrl"></div>'+
                '<h2 class="mfp-username"></h2>'+
              '</a>'+
              '<div class="mfp-userLocation"></div>'+
            '</div>'
  },
  gallery: {
    enabled: true 
  },
  callbacks: {
    markupParse: function(template, values, item) {
      // optionally apply your own logic - modify "template" element based on data in "values"
      // console.log('Parsing:', template, values, item);
    }
  }
});

Javascript:

<button style="padding:20px;">Open popup</button>

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 200px;
  margin: 20px auto;
  text-align: center;
}

// Define data for the popup
var data = [
  {
    username: "Brad Frost", // Key "username" means that Magnific Popup will look for an element with class "mfp-username" in markup and will replace its inner HTML with the value.
    userWebsite_href: 'http://www.bradfrostweb.com', // Key "userWebsite_href" means that Magnific Popup will look for an element with class "mfp-userWebsite" and will change its "href" attribute. Instead of ending "href" you may put any other attribute.
    userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1561258552/brad_frost_bigger.png', // Prefix "_img" is special. With it Magnific Popup finds an  element "userAvatarUrl" and replaces it completely with image tag.
    userLocation: 'Pittsburgh, PA'
  },
  {
    username: "Paul Irish",
    userWebsite_href: 'http://paulirish.com',
    userAvatarUrl_img: 'https://si0.twimg.com/profile_images/2910976341/7d972c32f3882f715ff84a67685e6acf_bigger.jpeg',
    userLocation: 'San Francisco'

  },

  {
    username: "Chris Coyier",
    userWebsite_href: 'http://css-tricks.com',
    userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1668225011/Gravatar2_bigger.png',
    userLocation: 'Palo Alto, California'
  }
];

// initalize popup
$('button').magnificPopup({ 
  key: 'my-popup', 
  items: data,
  type: 'inline',
  inline: {
    // Define markup. Class names should match key names.
    markup: '<div class="white-popup"><div class="mfp-close"></div>'+
              '<a class="mfp-userWebsite">'+
                '<div class="mfp-userAvatarUrl"></div>'+
                '<h2 class="mfp-username"></h2>'+
              '</a>'+
              '<div class="mfp-userLocation"></div>'+
            '</div>'
  },
  gallery: {
    enabled: true 
  },
  callbacks: {
    markupParse: function(template, values, item) {
      // optionally apply your own logic - modify "template" element based on data in "values"
      // console.log('Parsing:', template, values, item);
    }
  }
});

//为弹出窗口定义数据
风险值数据=[
{
用户名：“Brad Frost”//Key“username”表示放大弹出窗口将在标记中查找类为“mfp username”的元素，并将其内部HTML替换为值。
用户网站\'u href:'http://www.bradfrostweb.com“，//键“userWebsite_href”表示放大弹出窗口将查找类为“mfp userWebsite”的元素，并将更改其“href”属性。您可以放置任何其他属性，而不是结束“href”。
userAvatarUrl_img:'https://si0.twimg.com/profile_images/1561258552/brad_frost_bigger.png“，//前缀“_img”是特殊的。使用它，放大弹出窗口会找到一个元素“userAvatarUrl”，并将其完全替换为图像标记。
用户位置：“宾夕法尼亚州匹兹堡”
},
{
用户名：“Paul Irish”，
用户网站\'u href:'http://paulirish.com',
userAvatarUrl_img:'https://si0.twimg.com/profile_images/2910976341/7d972c32f3882f715ff84a67685e6acf_bigger.jpeg',
用户位置：“旧金山”
},
{
用户名：“Chris Coyier”，
用户网站\'u href:'http://css-tricks.com',
userAvatarUrl_img:'https://si0.twimg.com/profile_images/1668225011/Gravatar2_bigger.png',
用户位置：“加州帕洛阿尔托”
}
];
//初始化弹出窗口
$（'button'）。放大弹出（{
键：“我的弹出窗口”，
项目：数据，
键入：“内联”，
内联：{
//定义标记。类名应与键名匹配。
标记：“”+
''+
''+
''+
''+
''+
''
},
画廊：{
已启用：true
},
回调：{
markupParse：函数（模板、值、项）{
//可以选择应用您自己的逻辑-根据“值”中的数据修改“模板”元素
//log（'解析：'，模板，值，项）；
}
}
});

将此项添加到您的放大弹出功能中，单击此项将打开第二项：

index:2,

在文档中列出

查看此代码笔：

或者试试我解决问题的方法：

然后，当弹出窗口打开时，转到弹出窗口中相应的索引

callbacks: {
  open: function(){$('button').magnificPopup('goTo',clickedButton)}}

问题是，goTo操作是可见的，尽管我认为它可能被css转换所掩盖

对我来说，上面的操作稍有变化


// Define data for the popup
var data = [
  {
    username: "Brad Frost", // Key "username" means that Magnific Popup will look for an element with class "mfp-username" in markup and will replace its inner HTML with the value.
    
    userWebsite_href: 'http://www.bradfrostweb.com', // Key "userWebsite_href" means that Magnific Popup will look for an element with class "mfp-userWebsite" and will change its "href" attribute. Instead of ending "href" you may put any other attribute.
    
    userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1561258552/brad_frost_bigger.png', // Prefix "_img" is special. With it Magnific Popup finds an  element "userAvatarUrl" and replaces it completely with image tag.
    
    userLocation: 'Pittsburgh, PA'
  },
  
  {
    username: "Paul Irish",
    userWebsite_href: 'http://paulirish.com',
    userAvatarUrl_img: 'https://si0.twimg.com/profile_images/2910976341/7d972c32f3882f715ff84a67685e6acf_bigger.jpeg',
    userLocation: 'San Francisco'

  },
  
  {
    username: "Chris Coyier",
    userWebsite_href: 'https://css-tricks.com',
    userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1668225011/Gravatar2_bigger.png',
    userLocation: 'Palo Alto, California'
  }
];

// initalize popup
 $('button').click(function(){
  let index = $('button').index(this);
   console.log("button index",index)
  $(this).magnificPopup({ 
  key: 'my-popup', 
  items: data,
  type: 'inline',
 index:index,
  inline: {
    // Define markup. Class names should match key names.
    markup: '<div class="white-popup"><div class="mfp-close"></div>'+
              '<a class="mfp-userWebsite">'+
                '<div class="mfp-userAvatarUrl"></div>'+
                '<h2 class="mfp-username"></h2>'+
              '</a>'+
              '<div class="mfp-userLocation"></div>'+
            '</div>'
  },
  gallery: {
    enabled: true 
  },
  callbacks: {
    markupParse: function(template, values, item) {
      // optionally apply your own logic - modify "template" element based on data in "values"
      // console.log('Parsing:', template, values, item);
    },
    open: function() {
      // Will fire when this exact popup is opened
      // this - is Magnific Popup object
      console.log("inside open",index)
    },
  }
});



   });


//定义弹出窗口的数据
风险值数据=[
{
用户名：“Brad Frost”//Key“username”表示放大弹出窗口将在标记中查找类为“mfp username”的元素，并将其内部HTML替换为值。
用户网站\'u href:'http://www.bradfrostweb.com“，//键“userWebsite_href”表示放大弹出窗口将查找类为“mfp userWebsite”的元素，并将更改其“href”属性。您可以放置任何其他属性，而不是结束“href”。
userAvatarUrl_img:'https://si0.twimg.com/profile_images/1561258552/brad_frost_bigger.png“，//前缀“_img”是特殊的。使用它，放大弹出窗口会找到一个元素“userAvatarUrl”，并将其完全替换为图像标记。
用户位置：“宾夕法尼亚州匹兹堡”
},
{
用户名：“Paul Irish”，
用户网站\'u href:'http://paulirish.com',
userAvatarUrl_img:'https://si0.twimg.com/profile_images/2910976341/7d972c32f3882f715ff84a67685e6acf_bigger.jpeg',
用户位置：“旧金山”
},
{
用户名：“Chris Coyier”，
用户网站\'u href:'https://css-tricks.com',
userAvatarUrl_img:'https://si0.twimg.com/profile_images/1668225011/Gravatar2_bigger.png',
用户位置：“加州帕洛阿尔托”
}
];
//初始化弹出窗口
$（“按钮”）。单击（函数（）{
让index=$（'button'）.index（this）；
日志（“按钮索引”，索引）
$（此）.magnificPopup（{
键：“我的弹出窗口”，
项目：数据，
键入：“内联”，
索引:索引,，
内联：{
//定义标记。类名应与键名匹配。
标记：“”+
''+
''+
''+
''+
''+
''
},
画廊：{
已启用：true
},
回调：{
markupParse：函数（模板、值、项）{
//可以选择应用您自己的逻辑-根据“值”中的数据修改“模板”元素
//log（'解析：'，模板，值，项）；
},
打开：函数（）{
//将在打开此确切弹出窗口时触发
//这是一个放大的弹出对象
console.log（“内部打开”，索引）
},
}
});
});

弹出窗口中有一个锚定标记。有一个锚标签。你想打开锚定标签点击？我真正需要的是一种动态的方式。例如，基于对所单击的

的某个标记进行解析来设置索引。我无法用您的

索引：2

示例实现这一点。有什么想法吗？您可以将索引设置为数据属性，然后将该属性用作函数的变量吗？