私の Web ページでは、Jquery プログラムを使用して、指定したフィールドのユーザーにツールチップを表示しました。しかし、いくつかのフィールドのヒントを他の位置に表示する必要があります。このために、if条件を使用してコントロールを変更しましたが、必要な方法で機能していませんでした。何が問題だったのかわかりません。コード ：
$(window).load(function(){
/*
Display Tooltips on hovering over the input fields if an
alt tag is present
*/
if($('#frmail'))
{
$('input').hover(function()
{
var thisItem = $(this);
var msgTip = thisItem.attr('alt');
if(msgTip.length)
{
$('body').append('<div id="menuTooltip">\
<p>'+ msgTip +'</p>\</div>');
var pos = thisItem.offset();
var width = thisItem.width();
問題コード:
if($('#frmail'))
{
$("#menuTooltip").css( { "left": (pos.left + 95) + "px", "top":pos.top - 110 + "px" } );
$("#menuTooltip").fadeIn('slow');
}
else
{
$("#menuTooltip").css( { "left": (pos.left + 115) + "px", "top":pos.top - 90 + "px" } );
$("#menuTooltip").fadeIn('slow');
}
}
}, function()
{
$('div#menuTooltip').remove();
});
}
else
{}
});
HTMLの問題コードは
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type='text/javascript' src='js/jquery-1.8.3.js'></script>
<body>
<div id="topnav" class="topnav">
<a href="#" class="fr"><span>Forgot Password</span></a>
</div>
<div id="fr_menu">
<form id="fr">
<label for="username">Username Or Email-ID</label>
<input type="text" name="username" id="frmail" alt="Please check your username is correct before clicking Resend." />
<input type="submit" id="send" value=""/>
</form>
</div>
<p></p>
</div>
</div> <!-- end .header -->
<div class="container">
<div class="note"></div>
<div class="features"></div>
<div class="reg">
<h2>Didn't have an Account ?Create now.<center>It's Free !!</center></h2>
<form action="login" method="post">
<input type="text" name="fname" class="rtext" id="name" placeholder="First Nmae" alt="Enter your first name<br>Ex:<br> James P.J.<br>Enter (James)."/>
<input type="button" value="" id="next"/>
</form>
</div>
</body></html>
CSS コード:
#topnav a.menu-open {
background:url("img/bg.png") repeat-x #222222;
color:#666!important;
outline:none;
}
#fr_menu {
-moz-border-radius:5px;
-webkit-border-radius:5px;
-webkit-box-shadow: 0px 3px 4px #fff;
-moz-box-shadow: 0px 3px 4px ;
box-shadow: 0px 3px 4px ; display:none;
background:url("img/bg.png") repeat-x #222222;
position:absolute;
width:210px;
z-index:100;
border:1px transparent;
text-align:left;
padding:10px;
margin-left:-8px;
*margin-left:-15px;
margin-top:35px;
color:#789;
font-size:11px;
}
#fr_menu input[type=text]{
display:block;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:1px solid #ACE;
-moz-box-shadow: 0px 1px 0px #777;
-webkit-box-shadow: 0px 1px 0px #777;
background: #ddd url('img/inputSprite.png') no-repeat 4px 5px;
background: url('img/inputSprite.png') no-repeat 4px 5px, -moz-linear-gradient(
center bottom,
rgb(225,225,225) 0%,
rgb(215,215,215) 54%,
rgb(173,173,173) 100%
);
background: url('img/inputSprite.png') no-repeat 4px 5px, -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(225,225,225)),
color-stop(0.54, rgb(215,215,215)),
color-stop(1, rgb(173,173,173))
);
color:#333;
text-shadow:0px 1px 0px #FFF;
font-size:13px;
margin:10px 0 5px;
padding: 7px 14px 7px 30px;
width:80%;
}
#menuTooltip{
width: 160px;
min-height:90px;
position: absolute; display: none;
text-align:center;
font-family:Arial;
font-size:12px;
background-image:url('../images/tooltip_ao.png');
background-repeat:no-repeat;
}
#menuTooltip p {
width:145px;
margin:5px;
height:60px;
margin-top:10px;
}
if 条件は常に true として実行されていました。これを解決するのを手伝ってください....