使用 jQuery Hovercard 和自定义数据属性创建 Hovercard

Posted 2023-05-08

【中文标题】使用 jQuery Hovercard 和自定义数据属性创建 Hovercard

【英文标题】：Creating a Hovercard with jQuery Hovercard and custom data attributes

【发布时间】：2012-06-24 18:26:50

【问题描述】：

我需要一些关于使用this plugin (download) 创建更多 HoverCard 的帮助。我刚刚在JSFiddle 上创建了一个代码演示。您对此有什么建议吗？

javascript：

$('.babe-hover').hovercard( 
    detailshtml: $(this).attr('data-control').html(),
    width:278 
); 

HTML：

 <ul class="demo">
<li>
    <a href="#"><span class="babe-hover" data-control="control-01">William Johnson</span></a>
    <div id="control-01" style="display: none;">
        <p class="s-desc">Address: 64 Newman Street.</p>
        <ul class="s-stats">
            <li>Tweets<br><span class="s-count">1337</span></li>     
        </ul>
    </div>
</li>
<li>
    <a href="#"><span class="babe-hover" data-control="control-02">Hanson Thomas</span></a>
    <div id="control-02" style="display: none;">
        <p class="s-desc">Address: 64 Newman Street.</p>
        <ul class="s-stats">
            <li>Tweets<br><span class="s-count">1337</span></li>     
        </ul>
    </div>
</li>

​

【参考方案1】：

现在它在 the author 的帮助下工作了

$('.babe-hover').each(function()    
var $this = $(this),
    myControlId = $this.attr('data-control'),
    htmlForHovercard = $('#'+ myControlId).html();

$this.hovercard( 
    detailsHTML: htmlForHovercard,
    width:278 
); 
);

无论如何感谢@egasimus 的建议 :)

【参考方案2】：

我想你会问：为什么这不起作用？

您正在尝试对 $(this).attr('data-control') 返回的内容调用 .html() 方法。而$(this).attr('data-control')只返回一个字符串，需要获取对应的元素才能使用.html()。以下代码适用于我：

$("#" + $(this).attr('data-control')).html()

即“选择 id 等于该元素的 data-control 属性的元素，并在其上调用 .html()。”