Question

我有两个功能。我如何从这两个jquery效果/函数：1 jquery代码。

// Function 1. For hover over the .landkaart
var hover = false;

$(".landkaart > ul > li > a").hover(function () {
    if ( hover == true ) {
        $(this).closest("li").removeClass('open');
        hover = false;
    }  else {
        $(".landkaart ul li .pijl").hide();

        $(this).closest("li").addClass('open');

        console.log(this);

        $(".pijl").show();
        hover = true;
    }
});

// Interval for the .landkaart
var listitem = $(".landkaart > ul > li"),
    len = listitem.length,
    index = 0;

$(".landkaart > ul > li:first").addClass('open');

setInterval(function () {
    $(".landkaart > ul > li").removeClass('open');    
    if ( (index + 1) >= len ) {
        index = 0;
        $(".landkaart > ul > li:first").addClass('open');
    } else {
        listitem.eq(index).next().addClass('open');
    }
    index++;
}, 5000);

Answer 1

我不确定你想要什么，所以我试着优化你的代码。

如果你在悬停功能中做了一些更复杂的事情，你可以在计时器内使用trigger()来调用悬停功能（参见注释掉的行），但实际上并不需要“结合“你问的功能（demo）：

CSS

.pijl { display: none; }
.open a { color: #f00; }
.open .pijl { display: inline-block; }

脚本

// Interval for the .landkaart
var listitem = $(".landkaart li"),
    len = listitem.length,
    index = 0,
    timer = setInterval(function() {
        index = (index + 1) % len;
        // use trigger to simulate a mouseenter and activate the hover event
        // listitem.eq(index).trigger('mouseenter');            
        // but it might be better to just do this:
        listitem.removeClass('open').eq(index).addClass('open');
    }, 5000);

listitem
    .hover(function() {
        listitem.removeClass('open');
        $(this).addClass("open");
    })
    .eq(0).addClass('open');

将2个jquery函数放在1个函数中

1 个答案: