如何使用javaScript在不同页面上显示带有自定义消息的工具提示?

时间:2017-05-26 12:49:46

标签: javascript jquery tooltip

我有我编写的这段代码,我试图在需要放置工具提示的不同页面上显示带有自定义消息的工具提示。你能看一下这个并帮助我,这样我才能让它发挥作用。

目前代码中发生了什么。我测试了它是否通过显式声明

来打印对象中的一个字符串
customMessage[0].emailOrCell()

在for循环中循环通过customMessage对象数组。我怎样才能让它正常工作?

提前致谢。

代码如下:

var customMessage = [{
    emailOrCell: function (message) {
        if (window.location == url) {
            message = "Please enter the email address or cell phone number associated with your WebsiteName account.";
        }

        return message;

    }
}, {
    forgotPassword: function (message) {
        if (window.location == url) {
            message = "If you have never previously logged in to the app or WebsiteName , your password is your ID number or your passport number.";
        }

        return message;

    }
}];

for (var i = 0; i < customMessage.length; i++) {
    var $tooltip = $("<div class='info-tip'><div class='tool-tip-pin'></div><h2 class='tool-tip-title'>Password</h2><div class='tooltip-text'>" + customMessage[0].emailOrCell() + "</div></div>");
}


$('.info-icon').mouseenter(function () {
    $($tooltip).insertAfter(".info-icon");
}).mouseout(function () {
    if ($($tooltip).is(':visible')) {
        $($tooltip).remove();
    }
});

2 个答案:

答案 0 :(得分:0)

具有一个对象的数组没有多大意义。可以使用普通数组吗?

var customMessages = [
function emailOrCell(message) {
    if (window.location == url) {
        message = "Please enter the email address or cell phone number associated with your WebsiteName account.";
    }

    return message;

}, 
function forgotPassword (message) {
    if (window.location == url) {
        message = "If you have never previously logged in to the app or WebsiteName , your password is your ID number or your passport number.";
    }

    return message;

}];

现在你可以做到:

customMessages.forEach(message=>{
 alert(message(" no problem detected!"));
});

答案 1 :(得分:0)

除了一些jquery声明之外,我没有看到你的函数有任何问题,你不必声明$($ tooltip),因为它已经是一个jquery元素......

var url='/test';
var customMessage = [{
    emailOrCell: function (message) {
        if (window.location == url) {
            message = "Please enter the email address or cell phone number associated with your MySchool account.";
        }
        

        return message;

    }
}, {
    forgotPassword: function (message) {
        if (window.location == url) {
            message = "If you have never previously logged in to the MySchool app or website, your password is your ID number or your passport number.";
        }

        return message;

    }
}];

for (var i = 0; i < customMessage.length; i++) {
    var $tooltip = $("<div class='info-tip'><div class='tool-tip-pin'></div><h2 class='tool-tip-title'>Password</h2><div class='tooltip-text'>" + customMessage[0].emailOrCell('custom message') + "</div></div>");
}


$('.info-icon').mouseenter(function () {
    $tooltip.insertAfter(".info-icon");
}).mouseout(function () {
    if ($tooltip.is(':visible')) {
        $tooltip.remove();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='info-icon'>info-icon</div>