jquery"；这"；分开悬停

我有一个我的客户正在使用的自定义播放器，他们给我的javascript不好。。。真糟糕。我真的不想从头开始重做，所以我想我可以接受他们的原始代码

var togglePlayer = function(){
        $('.jp-gui').slideUp();
        $('#jp_container, #jp_container2').hover(
            function () {
                $('.jp-gui').slideDown();
            },
            function () {
                $('.jp-gui').slideUp();
            }
        );
    };

我试着用这个来修复它：

var togglePlayer = function(){
        $('.jp-gui').slideUp();
        $('#jp_container, #jp_container2').hover(
            function () {
                $(this + '.jp-gui').slideDown();
            },
            function () {
                $(this + '.jp-gui').slideUp();
            }
        );
    };

现在不接受悬停就好了。我用一个.toggleSlide完全重写了它，它修复了悬停问题，但又产生了10个问题

有人知道一个简单的解决方法吗？这样当我在#jp#u容器上悬停时，它就不会在#jp#u容器2上进行悬停动画，反之亦然

$('#jp_container, #jp_container2').hover(function() {
    $(this).find('.jp-gui').stop(true, true).slideToggle();
});

在jQuery事件处理程序的上下文中，此

是处理程序附加到的DOM元素（或在事件委派的情况下委派）。将其转换为字符串不会有任何好处

尝试：

（第二个参数称为上下文）或

相反。两者都将选择事件目标中的所有

.jp gui

元素（

#jp_container

或

#jp_container2

）

---

如果要进行进一步更改，请注意

#jp#u container，#jp#u container2

有时可以替换为

[id^=“jp#u container”]

（选择id以指定字符串开头的所有元素）。将公共类添加到两个容器中会更好

此外，正如@Michael所指出的，一对

slideUp

/

slideDown

可以被一个

slideToggle

替换。这可能并不总是最好的解决方案，但它确实缩短了代码

---

@Michael还建议使用

stop（true，true）

停止上一个动画。如果不停止动画，下一个动画将在当前动画排队后延迟，这可能导致元素在生成多个悬停事件后重复上下滑动。如果容器更改其大小或其子容器转义，而没有

stop

，则如果每个动画触发一个额外的悬停事件，甚至可能得到一个无限循环。

回调中的此

是一个DOM元素。将其与字符串连接不会有任何好处。试试

$（'.jpgui'，这个）

BAMF！你赢了。你应该回答这个问题，这样我就可以投票了。

        function () {
            $(this + '.jp-gui').slideDown();
        },

        function () {
            $('.jp-gui', this).slideDown();
        },

        function () {
            $(this).find('.jp-gui').slideDown();
        },