0

我正在开发一项功能，如果您单击一个模糊链接，它将在预览窗口中显示完整的描述......很像搜索引擎中的搜索结果预览，如谷歌。

我需要将完整的描述文本和事件都传递给处理函数，以便该函数知道要显示什么以及在哪里显示（在简介下）。

我的问题是我应该将什么传递给函数。目前我有以下，它不工作。

<a href="javascript:DisplayFullDescription('blah blah description goes here');">blurb text here</a>

function javascript:DisplayFullDescription(e, fullText){
   //find out mouse click position
   //display a preview window (div) with description there

 }
4

3 回答 3

2

如果您个人不使用 HTML5，我会使用 为全文创建一个隐藏元素display:none，我会将其作为数据分配给每个适用的元素，并使用该信息click

<a class="clickable" href="#">blurb text here<span style="display:none">blah blah description goes here</span></a>

$('a.clickable').each(function() {
    $(this).data('fulltext',$(this).find('span').remove().text());
}).click(function(event) {
    event.preventDefault();
    $('body').append('<div>'+$(this).data('fulltext')+'</div>');
})
于 2012-08-22T16:03:17.877 回答
1

data-*使用 jQuery 绑定事件处理程序和使用 HTML5属性来存储全文比使用属性要容易得多onclick。

HTML：

<a href="#" data-fulltext="blah blah description goes here">blurb text here</a>

jQuery/JavaScript：

$('a').click(function(e) {
    DisplayFullDescription(e, $(this).data('fulltext'));
    e.preventDefault();
});

function DisplayFullDescription(e, fullText){
    //find out mouse click position
    //display a preview window (div) with description there
}
于 2012-08-22T15:49:20.877 回答
1 
<a id="someID" href="#" data-fulltext="blah blah description goes here">blurb text here</a>
<script>
var element = document.getElementById('someID'); // grab the element by id. (simple for this demo)
element.onclick = DisplayFullDescription; // attach the event handler to the onclick function

function DisplayFullDescription(e) { // because we attached the handler above the Event is passed as the first argument to the function (handler) 
    var description = this.getAttribute('data-fulltext'); // 'this' now references the element in which the onclick was invoked. 
    alert(description);
}
</script>

您可以在上面尝试一下，看看它是否满足您的需求。

注意事项：
- 这不需要 jQuery 库来运行（仅使用它会过大）
- 这将跨浏览器（旧的和现代的）工作
- 这与 HTML5 无关（这很酷......但是再次，过度杀伤和限制）
- data-* 可以使用 getAttribute() 访问，并且不依赖于 element.dataset 可用。

但是，阅读更多有关事件的信息会对您有所帮助

于 2012-08-22T15:51:55.460 回答