动态悬停详细信息以及文本文件中的数据 [英] Dynamic hover details with data from text file
问题描述
当用户将鼠标悬停在特定文本字符串上时，我正在使用jquery hovercard插件使用ajax从文本文件中提取文本-这一切都很好.
I'm using the jquery hovercard plugin to pull in text from a text file using ajax when a user hovers over a particular text string - this all works great.
我添加了以下功能:可以在页面加载时搜索内容，并为任何匹配的名称添加 label 类-定义名称后，该功能非常有用.
I've added the functionality to search through the content on page load and add a label class to any matching names - this works great when the name is defined.
在我的上一个问题的帮助下;(非常感谢@Alex Klock)，我已经明白了，以便悬停时从文本文件中仅提取一个div的text/html-定义名称时效果很好.
With help on my previous question; (many thanks @Alex Klock), I have got it so that only one div's text/html is pulled in from the text file on hover - works great when the name is defined.
我现在要做的是将它们放在一起并使其动态化，以便在页面加载时将所有名称从文本文件中拉出，然后将正确的 label 类添加到相关文件中名称/秒，然后在鼠标悬停时显示正确/对应的文本/html.
What I need to do now is pull it all together and make it dynamic, so that all names are pulled out of the text file on page load, the correct label class is added to the relevant name/s, and then the correct/corresponding text/html is displayed on hover.
任何帮助将不胜感激:)
Any help would be massively appreciated : )
//HTML代码
<div id="content">
<p>jQuery by John Resig is a cross-browser JS library designed to simplify the client-side scripting of HTML. It was released in January of 2006 at BarCamp NYC. Used by over 46% of the 10,000 most visited websites, it's the most popular JavaScript library in use today Tim Berners-Lee.</p>
<p>jQuery is free, Tim Berners-Lee open source software, dual-licensed under the MIT License and GNU General Public License, Tim Berners-Lee Version 2.[4] jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and John Resig develop Ajax applications.</p>
</div>
//jquery代码
//based on Highlight words in text with jQuery by (http://www.gotoquiz.com/web-coding/programming/javascript/highlight-words-in-text-with-jquery/)
jQuery.fn.addhover = function (str, className) {
var regex = new RegExp(str, "gi");
return this.each(function () {
$(this).contents().filter(function() {
return this.nodeType == 3 && regex.test(this.nodeValue);
}).replaceWith(function() {
return (this.nodeValue || "").replace(regex, function(match) {
return "<label class=\"" + className + "\" style=\"color:#932121;\">" + match + "</label>";
});
});
});
};
$(document).ready(function () {
var HTML_FILE_URL = 'helloworld.txt';
$.get(HTML_FILE_URL, function(data) {
var fileDom = $(data);
fileDom.filter('.contact').each(function() {
var savename = $(this).closest(".contact").attr("id");
});
});
$("#content *").addhover("John Resig", "demo-ajax");
var hoverHTMLDemoAjax = '<div class="demo-cb-tweets"></div>';
$(".demo-ajax").hovercard({
detailsHTML: hoverHTMLDemoAjax,
width: 350,
delay: 500,
cardImgSrc: 'http://ejohn.org/files/short.sm.jpg',
onHoverIn: function () {
$.ajax({
url : "helloworld.txt",
type: 'GET',
dataType: "text",
beforeSend: function () {
$(".demo-cb-tweets").prepend('<p class="loading-text">Loading latest tweets...</p>');
},
success: function (data) {
var people = $(data),
john = people.filter('#John_Resig');
$(".demo-cb-tweets").empty().append(john);
},
complete: function () {
$('.loading-text').remove();
}
});
}
});
});
//Helloworld.txt文件内容
<div class="contact" id="John_Resig">
<p><strong>John_Resig Testing testing testing!</strong></p>
<p>And on another line of text : )</p>
</div>
<div class="contact" id="Tim_Berners_Lee">
<p><strong>Tim_Berners_Lee Testing testing testing!</strong></p>
<p>And on another line of text : )</p>
</div>
推荐答案
这是我的解决方案:
对于您的JavaScript代码:
For your JavaScript code:
jQuery.fn.addhover = function (str, className) {
var regex = new RegExp(str, "gi");
return this.each(function () {
$(this).contents().filter(function() {
return this.nodeType == 3 && regex.test(this.nodeValue);
}).replaceWith(function() {
return (this.nodeValue || "").replace(regex, function(match) {
return "<label class=\"" + className + "\" style=\"color:#932121;\">" + match + "</label>";
});
});
});
};
$(function() {
var HTML_FILE_URL = 'helloworld.txt';
$.get(HTML_FILE_URL, function(data) {
var fileDom = $(data);
fileDom.filter('.contact').each(function() {
var savename = $(this).closest(".contact").attr("id");
var hovername = savename.replace(/_/g, ' ');
$("#content *").addhover(hovername, "demo-ajax");
var hoverHTMLDemoAjax = '<div class="demo-cb-tweets"></div>';
$(".demo-ajax").hovercard({
detailsHTML: hoverHTMLDemoAjax,
width: 350,
delay: 500,
cardImgSrc: 'http://ejohn.org/files/short.sm.jpg',
onHoverIn: function () {
$.ajax({
url : HTML_FILE_URL,
type: 'GET',
dataType: "text",
beforeSend: function () {
$(".demo-cb-tweets").prepend('<p class="loading-text">Loading latest tweets...</p>');
},
success: function (data) {
var people = $(data),
name = people.filter('#' + savename);
$(".demo-cb-tweets").empty().append(name);
},
complete: function () {
$('.loading-text').remove();
}
});
}
});
});
});
});
在您的文本文件中，我将Tim_Berners_Lee更改为Tim_Berners-Lee.这是为了简化ID的解析，以便轻松地将其转换为相应的名称:
In your text file, I changed Tim_Berners_Lee to Tim_Berners-Lee. This is to simplify the parsing of the ID in order to easily convert it to its corresponding name:
<div class="contact" id="John_Resig">
<p><strong>John_Resig Testing testing testing!</strong></p>
<p>And on another line of text : )</p>
</div>
<div class="contact" id="Tim_Berners-Lee">
<p><strong>Tim_Berners_Lee Testing testing testing!</strong></p>
<p>And on another line of text : )</p>
</div>
希望这会有所帮助:)
这篇关于动态悬停详细信息以及文本文件中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
