Question

我有一个我的客户正在使用的自定义播放器，他们给我的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_container上时，它不会在#jp_container2上执行悬停动画，反之亦然？

Answer 1

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

Answer 2

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

this，在jQuery事件处理程序的上下文中，是处理程序附加（或委托，在事件委托的情况下）的DOM元素。将它转换为字符串将没有任何好处。

尝试：

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

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

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

代替。两者都会选择事件目标中的所有.jp-gui元素（#jp_container或#jp_container2）。

如果您想进行进一步的更改，请注意

#jp_container, #jp_container2有时可以替换为[id^="jp_container"]（选择ID以指定字符串开头的所有元素）。向两个容器添加一个公共类会更好。

另外，正如@Michael所指出的那样，slideUp / slideDown对可以被单个slideToggle取代。这可能并不总是最好的解决方案，但它确实缩短了代码。

@Michael还建议用stop(true, true)停止上一个动画。如果不停止动画，则下一个动画将在当前动画（入队）后延迟，这可能导致元素在生成多个悬停事件后反复上下滑动。如果容器改变了它的大小或者它的子容器在没有stop的情况下转义它的容器，如果每个动画触发一个额外的悬停事件，甚至可能得到一个无限循环。

jquery“this”分开悬停

2 个答案: