2

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

4

2 回答 2

3 
$('#jp_container, #jp_container2').hover(function() {
    $(this).find('.jp-gui').stop(true, true).slideToggle();
});
于 2012-12-10T22:41:13.387 回答
0 
        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). 如果不停止动画，则下一个动画会延迟到当前动画（s enqueued）之后，这可能会导致元素在生成多个悬停事件后反复上下滑动。如果容器改变了它的大小或者它的子容器逃脱了它的容器，stop如果每个动画都触发了一个额外的悬停事件，那么没有 , 甚至可能获得一个无限循环。

于 2012-12-11T04:55:52.820 回答