Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/powershell/11.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 我的变量值已更改,如何相应地更新我的函数?_Jquery_Dynamic_Flexslider_Inview - Fatal编程技术网

Jquery 我的变量值已更改,如何相应地更新我的函数?

Jquery 我的变量值已更改,如何相应地更新我的函数?,jquery,dynamic,flexslider,inview,Jquery,Dynamic,Flexslider,Inview,我有这个问题已经一个多星期了,它让我发疯。我不是一个“代码”型的人,尽管我做到了这一点,但我真的达到了极限。我希望有人能帮我解决问题 所以,我的问题是: 我正在使用三个插件:Flexslider、Inviewevent()和Scrollyfy。 我的网站分为几个部分,每个部分都是全屏的,多亏了scrollify插件及其航路点系统,每次用户滚动或使用键盘时,网站都会通过幻灯片动画自动滚动到下一个航路点。因为每个部分都是全屏的,所以我禁用了滚动条。 我使用Flexslider是因为我试图允许用户垂直

我有这个问题已经一个多星期了,它让我发疯。我不是一个“代码”型的人,尽管我做到了这一点,但我真的达到了极限。我希望有人能帮我解决问题

所以,我的问题是: 我正在使用三个插件:Flexslider、Inviewevent()和Scrollyfy。 我的网站分为几个部分,每个部分都是全屏的,多亏了scrollify插件及其航路点系统,每次用户滚动或使用键盘时,网站都会通过幻灯片动画自动滚动到下一个航路点。因为每个部分都是全屏的,所以我禁用了滚动条。 我使用Flexslider是因为我试图允许用户垂直和水平滚动。给你一个想法,我非常受这个网站的启发,并且基本上试图实现同样的目标:

现在,Flexslider插件有一个名为“键盘”的选项。这是一个布尔值。如果“true”,用户可以使用键盘上的箭头在幻灯片之间切换。 我的问题是,即使在看不见的情况下(当我在我网站的另一个部分时),滑块仍然在注册键盘输入,这让我很烦恼。我不希望用户能够在滑块不在视图中时操纵滑块。所以我使用插件Inviewevent来设定一个条件:如果滑块在视图中,那么键盘工作,如果不在视图中,那么它就不工作。 我也会为手机上的触摸滑动功能做同样的事情,但由于插件也提供了一个选项,我现在主要关注键盘,因为它应该基本上是一样的

以下是我的Jquery:

$(window).load(function(){
    var loopCount = 0; 
    var $keyboard;

    $('.flexslider').bind('inview', function (event, visible) { // Plugin "Inviewevent". Allows me to detect if an element is inview or not
        if (visible == true) {
            $keyboard = true;
            console.log($keyboard); // Is true
        }
        else {
            $keyboard = false;
            console.log($keyboard); // Is false
        }
    });
    $('.flexslider').flexslider({ // Plugin Flexslider. Contains the options and Callback that I use
        slideshow: false,
        animation: "slide",
        controlNav: false,
        directionNav: false,
        animationLoop: false,        
        keyboard: $keyboard, // This is the option that I'm interested in. I tried to use the variable $keyboard to define it, but (to my very little knowledge) it would seem that it only works once when the function is initialised. It doesn't change dynamically which is what I'm trying to do.
        end : function(slider){  // This callback fires when the user reaches the last slide
            currentLoopCount = loopCount;
            loopCount = currentLoopCount + 1;
        },
        after : function(slider){
            if (loopCount > 0 && slider.currentSlide === 0){ 
                $.scrollify.next(); // Plugin Scrollify. When the user go back to the first slide, the wbesite automatically scroll to the next section. I suck at code and I find it very neat :D
            }
        },
    });
$('.button').click(function(){
        alert($keyboard);
}); // This is not really important. I just used it to confirm the fact that the $keyboard variable do what I want it to do. When my slider is in view, it is true, and when it's not, it's false. No problem here.
}))

就这样。这可能是一个完全不同的方法,不管怎样,我走到这一步已经是一个奇迹了。我很确定我做的一些事情不是符合人体工程学的,也不是推荐的,所以如果你喜欢的话,请不要犹豫。 我还想为我的不清晰、我的词汇/拼写错误以及最终的奇怪句子道歉:英语不是我的母语。还要记住,我不擅长编码。HTML和CSS是小菜一碟,但javascript并不是我真正的朋友,尽管我了解它的原理。 最后一件事,我想添加链接到我使用的所有插件,但我不能发布超过2个链接,因为我还没有足够的声誉。我一直保持invievent只是因为它是最难找到的,其余的都很容易通过谷歌找到。对此我真的很抱歉

就这样。。。如果你有任何问题,或者你需要我做任何精确的事情,我当然可以。别担心你的英语:我比我写的更懂。最后,;如果你决定使用技术,请尝试向我解释,因为我不想只是复制/粘贴,但我想学习和提高自己。 提前谢谢大家,, 热忱地,
一些目瞪口呆的家伙:)

如果你想要的功能不是内置的,你就必须修改插件。您的评估是正确的,这个“键盘”属性只在初始化时使用——这是jQuery插件的常见模式。

所以,我自己设法解决了这个问题。重要的是,它做了我希望它做的事情:当它不在视图中时,用户不可能手动触发任何幻灯片

我使用了Flexslider的一个修改版本,其中包括销毁方法(请在此处找到:)

我使用了inviewevent插件,并将其与destroy方法相结合,以实现我想要的:

$('#portfolio').bind('inview', function (event, visible) {
    if (visible == true){
        initflex();
    }
    else if (visible == false){
        $('.flexslider').flexslider("destroy");
    }
});

function initflex() {
    $('.flexslider').flexslider({ //changed selector from .flexslider
        slideshow: false,
        animation: "slide",
        controlNav: false,
        directionNav: false,
        animationLoop: false,        
        keyboard: true,
        pauseInvisible: true,
        multipleKeyboard: false,
        controlNav: false,
        end : function(slider){
            currentLoopCount = loopCount;
            loopCount = currentLoopCount + 1;
        },
        after : function(slider){
            if (loopCount > 0 && slider.currentSlide === 0){ // meh
                $.scrollify.next();  
            }
        },
    });
};
我的想法是先销毁然后重新初始化函数,这样它就可以考虑我的变量,但事实是,在视图外销毁函数,在视图内初始化函数效果很好(尽管初始化时会出现很短的“弹出”效果,几乎看不见)


希望这有帮助

很高兴知道我至少做对了。如何告诉函数刷新自身?我不能用Inviewevent或当变量改变值时才启动函数,而不是让函数不断启动并降低浏览器的速度吗?谢谢你的评论。你必须分析插件的代码,看看它在做什么。对不起,我帮不上忙了。祝你好运。