1

当用户将鼠标悬停在特定的文本字符串上时，我正在使用 jquery hovercard 插件从使用 ajax 的文本文件中提取文本 - 这一切都很好。

我已经添加了在页面加载时搜索内容并将label类添加到任何匹配名称的功能 - 这在定义名称时非常有用。

在我上一个问题的帮助下；（非常感谢@Alex Klock），我已经得到它，因此只有一个 div 的 text/html 从悬停时的文本文件中拉入 - 在定义名称时效果很好。

我现在需要做的就是将它们拉到一起并使其动态化，以便在页面加载时将所有名称从文本文件中提取出来，将正确的label类添加到相关名称中，然后添加正确/对应的文本/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>
4

2 回答 2

2

这是我的解决方案：

对于您的 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>

希望这可以帮助 ：）

于 2013-01-04T17:46:50.157 回答
0

我设法获得了一个至少只发出 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 请求以获取实际数据，感觉就像一个糟糕的设计。

我建议您制作两个服务器端文件（或一个处理两个请求的文件）：

  1. getTypes => 返回将在后续 ajax 请求中使用的 ids 以获取实际数据（如果尚未加载）
  2. getData/for/* => 其中 * 是数据的实际标识符（例如：Tim_Berners_Lee）。一旦完成了这样的请求，它就可以被缓存和重用。

上面设计的方法类似于Web 服务之一，特别是RPC样式的 Web 服务。

请注意，根据您要实现的目标，可能存在其他更优化的解决方案。正如我在评论中提到的，如果您使用这种技术来填充最新的推文。无需从您的服务器退回该请求。您可以直接从 twitter api 中提取它！

于 2013-01-08T19:25:24.370 回答