Question

我有一个简单的MVC程序，它将用户列表传递给我的视图，在视图中我循环遍历数组并将每个用户名称分配给锚标记中的title属性。当用户将鼠标悬停在每个链接上时，我正在使用工具tipster插件来显示标题（用户名）。但是，由于某种原因，数组中的最后一项未分配“tooltipstered”类。

HTML

    <div class="map" style="height: 1114px; width:960px; position:relative; margin:0 auto; background: url('/Content/MAP.png') no-repeat top center;"></div>

的javascript

 $(function() {

        var allData = @Html.Raw(@JsonConvert.SerializeObject(Model.AllDeskData));

        var datatest;

        function getDesks(coordsArr) {
            for (var i = 0; i < coordsArr.length; i++) {
                var element = $("<a href='#' class='deskBtn tooltip' title='" + coordsArr[i].Name + "' data-name='" + coordsArr[i].UserName + "'></a>");

                $('.tooltip').tooltipster();

                $(element).on('click', function() {
                    var user = $(this).attr("data-name");
                    $.ajax({
                        url: "/Home/GetUserData",
                        type: "GET",
                        data: { user: user },
                        success: function(data) {
                            //console.log(data.photos[0].value);
                            $(".desk-info-box").animate({
                                "margin-top": "0px"
                            }, 400);
                            $(".map .overlay").fadeIn(300);
                            $(".desk-info-data .name").text(data.displayName);
                            $(".desk-info-data .followers").text("who has " + data.followerCount + " followers");
                            $(".desk-info-data .email").text("email: " + data.jive.username + ".");
                            $(".desk-img").css({ 
                                'background-image' : 'url(' + '/Content/gopi_desk.jpg' + ')',
                                'background-size' : '100% 260px',
                                'background-repeat' : 'no-repeat'
                            });
                            $(".user-image").attr("src",data.photos[0].value);
                        }
                    });

                });

                $(".hide-detail").on("click",function(){
                    $(".desk-info-box").animate({
                        "margin-top": "-425px"
                    }, 400);
                });


                $(element).css({
                    "top": coordsArr[i].DeskYCoord,
                    "left": coordsArr[i].DeskXCoord
                }).appendTo(".map");
            }
        }

        getDesks(allData);

        /* $(".deskBtn").on("click", function() {

        });*/

    });

我无法理解为什么最后一个项目没有分配给它的那个类。

Answer 1

在追加所有元素后调用工具提示

function getDesks(coordsArr) {
            for (var i = 0; i < coordsArr.length; i++) {
                var element = $("<a href='#' class='deskBtn tooltip' title='" + coordsArr[i].Name + "' data-name='" + coordsArr[i].UserName + "'></a>");



                $(element).on('click', function() {
                    var user = $(this).attr("data-name");
                    $.ajax({
                        url: "/Home/GetUserData",
                        type: "GET",
                        data: { user: user },
                        success: function(data) {
                            //console.log(data.photos[0].value);
                            $(".desk-info-box").animate({
                                "margin-top": "0px"
                            }, 400);
                            $(".map .overlay").fadeIn(300);
                            $(".desk-info-data .name").text(data.displayName);
                            $(".desk-info-data .followers").text("who has " + data.followerCount + " followers");
                            $(".desk-info-data .email").text("email: " + data.jive.username + ".");
                            $(".desk-img").css({ 
                                'background-image' : 'url(' + '/Content/gopi_desk.jpg' + ')',
                                'background-size' : '100% 260px',
                                'background-repeat' : 'no-repeat'
                            });
                            $(".user-image").attr("src",data.photos[0].value);
                        }
                    });

                });

                $(".hide-detail").on("click",function(){
                    $(".desk-info-box").animate({
                        "margin-top": "-425px"
                    }, 400);
                });


                $(element).css({
                    "top": coordsArr[i].DeskYCoord,
                    "left": coordsArr[i].DeskXCoord
                }).appendTo(".map");
            }
$('.tooltip').tooltipster();
        }

Tooltipster不显示最后一个数组项

1 个答案: