JQuery如果条件不能正常工作 [英] JQuery if condition was not working properly

问题描述

在我的网页中，我使用Jquery程序显示指定字段的用户的工具提示。
但是我需要显示一些字段在一些其他位置的提示。对于这个我使用if条件更改控件。但它不工作，我需要。我没有得到什么是它的问题。代码：

  $（window）.load（function（）{
 
 / * 
显示悬浮在输入字段上的工具提示（如果存在
 alt标记）
 * / 
 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 + 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'）。 
 
}）; 
} 
 else 
 {} 
}）; 
  

html问题代码是

 <！DOCTYPE html PUBLIC -  // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd > 
< html xmlns =http://www.w3.org/1999/xhtml> 
< head> 
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/> 
< title>欢迎< / title> 
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/> 
< script type ='text / javascript'src ='js / jquery-1.8.3.js'>< / script> 
< body> 
< div id =topnavclass =topnav> 
< a href =＃class =fr>< span>忘记密码< / span>< / a> 
< / div> 
< div id =fr_menu> 
< form id =fr> 
< label for =username>用户名或电子邮件ID< / label> 
< input type =textname =usernameid =frmailalt =请检查您的用户名是否正确，然后再点击重新发送。 /> 
< input type =submitid =sendvalue =/> 
< / form> 
< / div> 
< p>< / p> 
 
< / div> 
 
 
< / div> <！ -  end .header  - > 
 
< div class =container> 
< div class =note>< / div> 
< div class =features>< / div> 
< div class =reg> 
< h2>没有帐户？立即创建。< center>免费！< / center>< / h2> 
 
< form action =loginmethod =post> 
< input type =textname =fnameclass =rtextid =nameplaceholder =First Nmaealt =输入您的名字< br>例如：< br> James PJ< br> Enter（James）。/> 
 
< input type =buttonvalue =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，
左下角，
左上角，
 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。请帮我解决这个问题。

解决方案

$（'＃frmail'）<

替换

pre> if（$（'＃frmail'））


  if（$（'＃frmail'）。length）
  pre> 
In my web page i used the Jquery program to display tooltip for the user for specified field.
But i need to display the tip for some fields in some other position.For this i used the if condition to change the control.But it was not working how i need. I'm not getting what was the problem in it.  the  code  :
  $(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();
problem code:
    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
    {}
});
The html problemcode is
   <!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 code :
  #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;
   }
The if condition was always executing as true. Please help me to solve this....
解决方案
$('#frmail') can't be falsy, even if there is no element with that id.

Replace
if ($('#frmail'))
with
if ($('#frmail').length)


                        
这篇关于JQuery如果条件不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！