我如何使用“div”在Twitter的与多个按钮的Popover？ [英] How can I use "div" in Twitter's Popover with multiple buttons?

问题描述

这个解决方案适用于一个按钮的情况：是否可以使用div作为Twitter的Popover内容

但在我的页面中，我有一堆popovers（比如50-100 ）。
所以我需要修改这个解决方案。

这个wa @jävi的解决方案：

  $（document）.ready（function（）{
 $（'。danger'）。popover（{
 html：true，
 content：function（）{
 return $（'＃popover_content_wrapper'）。html（）; 
} 
}）; 
}）; 
  

每个按钮都有自己的ID。

 < a class ='danger'data-placement ='above'title =Popover Titlehref ='＃'>点击< / a> 
< div id =popover_div1style =display：none> 
< div>这是您的div内容< / div> 
< / div> 
 
< a class ='danger'data-placement ='above'title =Popover Titlehref ='＃'>点击< / a> 
< div id =popover_div2style =display：none> 
< div>这是您的div内容< / div> 
< / div> 
  

那么我该如何重写这个javascript代码片段来覆盖我所有的按钮？

解决方案

我自己就是为此而战。您需要将id放入触发popover的元素中。使用像这样的自定义数据属性（称为'data-id'）：

 < a class ='danger'data- id =popover_div1data-placement ='above'title =Popover标题href ='＃'>点击< / a> 
  

然后，您可以稍微修改您的JavaScript，以编程方式获取data-id属性值：

$ p $ $（document）.ready（function（）{
$（'。danger'）。popover（{
html：true，
content：function（）{
return $（$（this）.attr（'data-id'））。html（）;
}
} ）;
}）;


This solution is ok for one button cases: Is it possible to use a div as content for Twitter's Popover

But in my page I have a bunch of popovers (say 50-100).
So I need to modify this solution.

This wa @jävi's solution:

$(document).ready(function(){
  $('.danger').popover({ 
    html : true,
    content: function() {
      return $('#popover_content_wrapper').html();
    }
  });
});

Each of my button has its own id.

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_div1" style="display: none">
  <div>This is your div content</div>
</div>

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_div2" style="display: none">
  <div>This is your div content</div>
</div>

So how can I rewrite this javascript code snippet to cover all my buttons?

解决方案

Just fought with this myself. You need to put the id in the element that triggers the popover. Use a custom data attribute like so (called 'data-id'):

<a class='danger' data-id="popover_div1" data-placement='above' title="Popover Title" href='#'>Click</a>

Then you can modify your javascript slightly to grab the data-id attribute value programmatically:

$(document).ready(function(){
  $('.danger').popover({ 
    html : true,
    content: function() {
      return $($(this).attr('data-id')).html();
    }
  });
});

这篇关于我如何使用“div”在Twitter的与多个按钮的Popover？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！