我需要一些关于使用此插件创建更多HoverCards的帮助(下载)。我刚刚在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>
现在它在作者的帮助下工作
$('.babe-hover').each(function(){
var $this = $(this),
myControlId = $this.attr('data-control'),
htmlForHovercard = $('#'+ myControlId).html();
$this.hovercard({
detailsHTML: htmlForHovercard,
width:278
});
});
无论如何,感谢您的建议@egasimus:)
我想你在问:为什么这不起作用?
您正在尝试对$(this).attr('data-control')
返回的内容调用 .html()
方法。 但是$(this).attr('data-control')
只返回一个字符串,需要获取对应的元素才能使用.html()
。以下代码对我有用:
$("#" + $(this).attr('data-control')).html()
即,"选择其id等于该元素的数据控制属性的元素,并对其调用.html()。