Question

我正在尝试使用hoverIntent 显示内容，而不为每个ID编写特定条件。我希望在设置中将id传递给鼠标，这样我就可以通过在id +' - x'中添加字符来显示所选内容。

我已经尝试了几种方法来获取我正在盘旋的div但是这些通常最终会返回所有div的所有信息与“box”类。

我应该做父母，孩子的事吗？我真的不明白，但感觉这是有用的情况。

<div id="id-first-div" class="box">Trigger 1</div>
<div id="id-second-div" class="box">Trigger 2</div>

<div id="id-second-div-x" class="hide">Hidden Bullet 1</div>
<div id="id-first-div-x" class="hide">Hidden Bullet 2</div>

<script>
$(document).ready(function() {
    $("#id-first-div").hoverIntent(slide_right_settings);
    $("#id-second-div").hoverIntent(slide_right_settings);
});

var slide_right_settings={
    sensitivity: 4,
    interval: 1500,
    timeout: 5000,
    over: mousein_triger,
    out: mouseout_triger
};  

function mousein_triger(){
    var id = this.id; // I'm pretty sure I'm going wrong here 
    $(id + '-x').addClass('reveal');
    $(id + '-x').removeClass('hide');
}

function mouseout_triger() {
    $(id +'-x').addClass('hide');
    $(id +'-x').removeClass('reveal');
    }
</script>

Answer 1

//hover intent opening and closing
var slide_right_settings={
    over: mousein_triger,
    out: mouseout_triger
};  

//default id is home
var id = "home";

function mousein_triger(){
//updates id to the one triggering
    id = $(this).attr('id');
    $('#' + id + '-x').addClass('reveal');
    $('#' + id + '-x').removeClass('hide');
}

function mouseout_triger() {
    $('#' + id +'-x').addClass('hide');
    $('#' + id +'-x').removeClass('reveal');                
}

仍然不确定这是否是实现这一目标的最佳方式，但它正在发挥作用..我相信它可以得到很大改善。

Answer 2

将var id = this.id;放在函数

之外

hoverIntent使用hovered元素的id来改变类

2 个答案: