jQuery 计数器隐藏 div

Question

我正在尝试使用 jQuery 计数器来计算光标进入 div 的次数，如果数字是偶数，则 div 被隐藏，如果奇怪，则 div 以定义的效果显示，我遇到了问题因为这是我第一次使用这些方法，所以任何人都可以帮助我吗？这是代码和fiddle

上述脚本：

/*jslint browser: true*/
/*global $, jQuery*/

$(document).ready(function () {

'use strict';
$('.user_ui').hide();

//$(".user").hover(function () {
//  $(".user_ui").slideDown("fast");
//  $('.pre_autor').hide();
//}, function(){
//  $(".user_ui").slideUp("fast");
//  $('.pre_autor').show('fast');
//});


$('.user').mouseover(function () {
    var $this = $(this);
    var $count = parseInt($this.data('count'), 10) + 1;
    $this.data('count', count);

    if (count % 2 === 0) { 
    $(".user_ui").slideDown("fast");
    $('.pre_autor').hide();
    }
         else { 
        $(".user_ui").slideUp("fast");
        $('.pre_autor').show('fast');   

         }



});
}); 

这部分的css：

header {
height: 70px;
background: cadetblue;
}
.main {
font-family: DIN;
font-size: 25px;
letter-spacing: 5px;
color: white;
float: left;
}
.secondary {
font-family: 'DIN';
font-weight: lighter;
font-size: 12px;
letter-spacing: 3px;
color: white;
float: left;
margin-top: 12px;
margin-left: 5px;
}
.user {
font-size: 25px;
float: right;
color: white;
width: 20px;
height: 30px;
position: absolute;
right: 25px;
top: 20px;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
-o-transition: all 300ms;
transition: all 300ms;
}

.user_ui {
width: auto;
height: 200px;
background: cadetblue;
float: right;
border-bottom: 1px solid white;
border-radius: 0 0 0 5px;
position: absolute;
top: 70px;
right: 0;
}
.user_ui p {
margin-left: 5px;
margin-right: 5px;
margin-top: 3px;
color: white;
font-family: 'DIN-light';
text-align: right;
}
.pre_autor {
font-family: 'DIN';
font-size: 12px;
color: white;
float: left;
position: relative;
top: 30px;
left: 0;

}
.autor {
width: 100px;
height: 100px;
float: right;
margin-top: 15px;
margin-right: 15px;
border-radius: 4px 4px 4px 4px;
}

这部分的 Html：

<header>

<div class="align_user">
    <p class="pre_autor">Angus Miguel</p>

    <div class="user"><i class="fa fa-user"></i></div>
</div>
    <div class="user_ui">

          <p>Angus Miguel</p>
          <p>angusmiguel21@gmail.com</p>
          <img class="autor" src="http://bit.ly/1APlHHT" alt="O Autor" />

    </div>

</header>

它应该通过将人图标悬停在右上角来显示 div！对不起，我忘记了！

Answer 1

见http://jsfiddle.net/e8xjaxm6/3/

你的想法是对的，但你犯了几个错误。你在定义

var $count = parseInt($this.data('count'), 10) + 1;

但随后尝试以count 而不是$count 访问它。此外，您在元素上没有默认值 data-count。我在.user 中添加了一个data-count="0"，但您也可以添加逻辑来检查data-count 是否不存在，然后默认为0 并将其添加到元素中。

更新：

http://jsfiddle.net/e8xjaxm6/4/

我没有注意到这一点。我将mouseover 更改为mouseenter。还将if ($count % 2 === 0) 更改为if ($count % 2 === 1)