时间戳

首页 > 解决方案 > 如果有类显示 div 其他条件使用 JQuery

jquery - 如果有类显示 div 其他条件使用 JQuery

问题描述

我尝试使用 JQuery 来检查一个元素是否有一个 x 类在悬停时会显示其他 div，但是我的代码不起作用，不确定我错过了什么。

$(function(){
    if($('.naigation > li').hasClass('x')){
        $('.naigation > li').mouseenter(function(){
        $('#overlay').css('display','block');
        })
    }else if(!$('.naigation > li').hasClass('x')){
        $('#overlay').css('display','none');
        }
    }).mouseout(function(){
        $('#overlay').css('display','none');
    })

谢谢您的帮助。

标签： jqueryconditional-statements

解决方案

方法1）我们使用mouseleave，所以不需要else if

$(document).ready(function(){
  $('.naigation > li').mouseenter(function(){
    if ( $(this).hasClass('x') )
      $('#overlay').css('display','block') ;
  }).mouseleave(function() {
    $('#overlay').css('display','none') ;
  });
})


$(document).ready(function(){
  $('.naigation > li').mouseenter(function(){
    if ( $(this).hasClass('x') )
      $('#overlay').css('display','block') ;
  }).mouseleave(function() {
    $('#overlay').css('display','none') ;
  });
})
ul {
  padding: 0;
}

li {
  border: 2px solid red;
  padding: 5px;
  width: 100px;
  margin: 5px;
  list-style: none;
}

#overlay {
  width: 100px;
  height: 100px;
  border: 2px solid blue;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="naigation">
  <li class="x">Have X</li>
  <li>Have not X</li>
</ul>
<div id="overlay">Hello World!</div>

方法2）使用.naigation > li.x和移除if：

$(document).ready(function(){
  $('.naigation > li.x').mouseenter(function(){
    $('#overlay').css('display','block') ;
  }).mouseleave(function() {
    $('#overlay').css('display','none') ;
  });
})


$(document).ready(function(){
  $('.naigation > li.x').mouseenter(function(){
    $('#overlay').css('display','block') ;
  }).mouseleave(function() {
    $('#overlay').css('display','none') ;
  });
})
ul {
  padding: 0;
}

li {
  border: 2px solid red;
  padding: 5px;
  width: 100px;
  margin: 5px;
  list-style: none;
}

#overlay {
  width: 100px;
  height: 100px;
  border: 2px solid blue;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="naigation">
  <li class="x">Have X</li>
  <li>Have not X</li>
</ul>
<div id="overlay">Hello World!</div>

推荐阅读