动态悬停细节与数据从文本文件

我使用jquery hovercard插件，当用户悬停在一个特定的文本字符串上时，使用ajax从文本文件中拉入文本-这一切都很好。

我已经添加了搜索页面加载内容的功能，并将label类添加到任何匹配的名称中-当定义名称时，这工作得很好。

在我上一个问题的帮助下;(非常感谢@Alex Klock)，我已经得到了它，所以只有一个div的文本/html是从悬停的文本文件拉入-当名称被定义时效果很好。

我现在需要做的是把它全部拉在一起，使其动态，以便所有的名字都从页面加载的文本文件中拉出来，正确的label类被添加到相关的名称/s，然后正确的/相应的文本/html显示在悬停。

任何帮助都会非常感激:)

//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代码:

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的解析，以便轻松地将其转换为相应的名称:

<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>

希望这对你有帮助

我设法得到一个至少只发出ajax请求的工作模型。感觉还是很脏。如果你愿意的话，我还可以再调整一下。

//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;" data="" + match.replace(' ','_') + "">" + match + "</label>";
            });
        });
    });
};
$(document).ready(function () {
    var HTML_FILE_URL = 'helloworld.txt';
    var cards={};
    var hoverHTMLDemoAjax = '<div class="demo-cb-tweets"></div>';
    $.get(HTML_FILE_URL, function (data) {
        cards=$(data);
        cards.each(function() {
            if(!this.id)return;
            $("#content *").addhover(this.id.replace('_',' '), 'demo-ajax');
        });
        $(".demo-ajax").hovercard({
            detailsHTML: hoverHTMLDemoAjax,
            width: 350,
            delay: 500,
            cardImgSrc: 'http://ejohn.org/files/short.sm.jpg',
            onHoverIn: function () {
                $(".demo-cb-tweets").empty().append(cards.filter('#'+$(this).children().eq(0).attr('data')));
            }
        });
    }); 
});

你需要第一个ajax请求，让它动态地工作，基于什么id是在你的文件中找到的

在同一文件上执行后续ajax请求以获取实际数据，感觉真的是糟糕的设计。

我建议您创建两个服务器端文件(或者一个文件处理两个请求):

getTypes =>返回将在后续ajax请求中使用的id，以获取尚未加载的实际数据
getData/for/* =>其中*是您的数据的实际标识符(例如:Tim_Berners_Lee)。一旦这样的请求已经完成，它可以被缓存和重用。

上面设计的方法类似于一个web服务，特别是一个RPC风格的web服务。

请注意，根据你想要达到的目标，可能存在其他更优化的解决方案。正如我在评论中提到的，如果您使用这种技术来填充最新的tweet。没有必要将请求从服务器上反弹出去。你可以直接从twitter api中提取它!

相关内容

最新更新

热门标签：