jquery - テキストファイルからのデータを使用した動的なホバーの詳細

Question

jquery hovercard プラグインを使用して、ユーザーが特定のテキスト文字列にカーソルを合わせたときに ajax を使用してテキストファイルからテキストを取得しています。これはすべてうまく機能します。

ページの読み込み時にコンテンツを検索し、一致する名前にクラスを追加する機能を追加しましたlabel。これは、名前が定義されている場合にうまく機能します。

私の前の質問の助けを借りて; （@Alex Klockに感謝します）、ホバー時にテキストファイルから1つの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>

//Jクエリコード

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

score 2 · Accepted Answer

これが私の解決策です：

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 を対応する名前に簡単に変換できるように、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>

お役に立てれば：）

score 0 · Accepted Answer

私は、少なくとも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')));
            }
        });
    }); 
});

ファイルで実際に見つかったIDに基づいて動的に機能させるには、最初のajaxリクエストが必要です。

同じファイルに対して後続のajaxリクエストを実行して実際のデータを取得することは、非常に悪い設計のように感じます。

2つのサーバー側ファイル（または両方の要求を処理する1つのファイル）を作成することをお勧めします。

getTypes =>まだロードされていない場合、実際のデータを取得するために後続のajaxリクエストで使用されるIDを返します
getData / for / * =>ここで、*はデータの実際の識別子です（例：Tim_Berners_Lee）。このようなリクエストが実行されると、キャッシュして再利用できます。

上で設計されたアプローチは、Webサービスの1つ、特にRPCスタイルのWebサービスに似ています。

達成しようとしていることに基づいて、他のより最適化されたソリューションが存在する可能性があることに注意してください。私のコメントで述べたように、この手法を使用して最新のツイートを入力している場合。そのリクエストをサーバーからバウンスする必要はありません。ツイッターAPIから直接プルできます！

jquery - テキスト ファイルからのデータを使用した動的なホバーの詳細

2 に答える 2

Related

Reference

jquery - テキストファイルからのデータを使用した動的なホバーの詳細