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，但您也可以添加逻辑来检查mouseover是否存在，然后默认为0并将其添加到元素中。

更新

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

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

jQuery计数器隐藏div

1 个答案: