使用jQuery悬浮卡和自定义数据属性创建悬浮卡

Question

我需要一些帮助来创建更多的HoverCards与this plugin (download)。我刚刚在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>

​

Answer 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的建议:)

Answer 2

我猜你在问:为什么这个不起作用？

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

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

即，“选择id等于该元素的数据控件属性的元素，并对其调用.html()。”