1

I'm new to javascript so i'm not exactly sure how I can do this. Basically, in my website I have a kind of tooltip, that displays when hovering over certain input boxes. This is my javascript:

function showTip () {
    firstnameTip.style.display = "inline";
}
function hideTip () {
    firstnameTip.style.display = "none";
}
/* link HTML elements to corresponding event function */
function init () {
    /* link the variables to the HTML elements */
    firstnameTip = document.getElementById("firstnameTip");
    firstname = document.getElementById("firstname");
    /* assigns functions to corresponding events */
    firstname.onmouseover = showTip; /* for mouse */
    firstname.onmouseout = hideTip;
    firstname.onfocus = showTip; /* for cursor on input field */
    firstname.onblur = hideTip; /* for cursor moving out */
}
/* execute the initialisation function once the window*/
window.onload = init;

Basically the functionality i would like is to if i hover over "firstname", it displays the firstnameTip, and so on for other things like lastname (lastnameTip), etc.

Simple question but I've tried many things and can't figure it out. Anyone have any ideas? Thanks.

4

3 回答 3

3

这是我的设置方式：

function showTip (tipElement) {
    return function () {
        tipElement.style.display = "inline";
    };
}

function hideTip (element, tipElement) {
    return function () {
        if (document.activeElement !== element) {
            tipElement.style.display = "none";
        }
    };
}

function init() {
    initTipEvents("firstname", "firstnameTip");
    initTipEvents("lastname", "lastnameTip");
}

function initTipEvents(elementId, tipId) {
    var el = document.getElementById(elementId),
        tip = document.getElementById(tipId),
        showHandler = showTip(tip),
        hideHandler = hideTip(el, tip);

    el.onmouseover = showHandler;
    el.onfocus = showHandler;

    el.onmouseout = hideHandler;
    el.onblur = hideHandler;
}

window.onload = init;

演示：http: //jsfiddle.net/LX2Cb/

绑定所有必要的initTipEvents事件，基于元素id和它的提示id，重用修改后的showTip和hideTip函数。我在函数中添加了一个额外的检查，hideTip以确保当鼠标离开输入时提示没有隐藏，但它仍然集中。

于 2013-05-15T05:06:32.513 回答
0

好的，为了更通用，您应该使用传递给处理程序的事件参数并从中检索目标对象，例如：

var getTarget = function (event)
{
    var ttn = null;
    if (!event) 
        event = window.event;
    else if (event.target) 
        ttn = event.target;
    else if (event.srcElement) 
        ttn = event.srcElement;

    var tipId = ttn.id + "Tip";
    ttn = document.getElementById(tipId);
    return ttn;
}

接着：

function showTip (evt) {
    var ttn = getTarget(evt);
    ttn.style.display = "inline";
}

function hideTip (evt) {
    var ttn = getTarget(evt);
    ttn.style.display = "none";
}

此外：

function init () {

    /* for all relevant elements */
    for ( .... ) // iterate through a list or the dom
    {
        var theElement = ....(); // get the element

        /* assigns functions to corresponding events */
        theElement.onmouseover = showTip; /* for mouse */
        theElement.onmouseout = hideTip;
        theElement.onfocus = showTip; /* for cursor on input field */
        theElement.onblur = hideTip; /* for cursor moving out */
     }
}
/* execute the initialisation function once the window*/
init();

希望有帮助。

于 2013-05-16T15:04:28.257 回答
0

还有什么问题？奇迹般有效：

var firstnameTip;
var firstname;

function showTip () {
    firstnameTip.style.display = "inline";
}
function hideTip () {
    firstnameTip.style.display = "none";
}
/* link HTML elements to corresponding event function */
function init () {
    /* link the variables to the HTML elements */
    firstnameTip = document.getElementById("firstnameTip");
    firstname = document.getElementById("firstname");
    /* assigns functions to corresponding events */
    firstname.onmouseover = showTip; /* for mouse */
    firstname.onmouseout = hideTip;
    firstname.onfocus = showTip; /* for cursor on input field */
    firstname.onblur = hideTip; /* for cursor moving out */
}
/* execute the initialisation function once the window*/
init();

http://jsfiddle.net/6QvXT/

于 2013-05-15T04:29:26.907 回答