Newer
Older
2022-kodama / sample2.html
(function ($) {
            $("#comment").html($("#comment").html().replace(/&gt;&gt;(\d)/g,"<a href=id$1 class='anc'>" + "&gt;&gt;$1" + "</a>"));
            console.log(document);
            func(0);
            function func(n) {
                var l = 0;

                $(".anc").on("mouseenter", function (e) {
                    if (l == 0) {//ポップは一つだけ
                        l += 1;
                        $(".container").prepend("<div class='pop" + n + "'>");

                        $(".pop" + n).css({//ポップの修飾
                            position: 'absolute',
                            border: '1px solid #ccc',
                            'background-color': 'white',
                            top: '0',
                            left: '0',
                            'z-index': 1,
                            width:'50%',
                        })
                        var anc = $(this).attr("href"),//アンカーのhref取得
                            res = "<table class='table'> <tr><th>番号</th><th class='mes'>メッセージ</th></tr><tr>" + $("#" + anc).html() + "</tr></table>",//id検索
                            x = e.pageX,
                            y = e.pageY;
                        $(".pop" + n)
                            .append(res)
                            .css({
                                transform: "translate3d(" + x + "px," + y + "px,0)"
                            })
                            .show();
                        $(".pop" + n).on("mouseleave", function () {
                            $(this).remove();
                        })
                        func(n + 1);
                    }
                });
            }
        })(jQuery);