私の変数の値が変更されました。それに応じて関数を更新する方法は？

Question

私はこの問題が1週間以上続いていて、それが私を狂ってしまっています。私は "コード"なんて男じゃないし、これまでのことにもかかわらず、私は本当に限界に達している。私は誰かが私の問題を解決するのを助けることを願っています

私の問題は次のとおりです。 Flexslider、Inviewevent（https://remysharp.com/2009/01/26/element-in-view-event-plugin）とScrollifyという3つのプラグインを使用しています。 私のウェブサイトはセクションごとに分割されており、すべてのセクションがフルスクリーンで表示されます。スクロールプラグインとそのウェイポイントシステムのおかげで、ユーザーはスクロールしたりキーボードを使用するたびに、スライドアニメーションで次のウェイポイントに自動的にスクロールします。すべてのセクションがフルスクリーンなので、私はスクロールバーを無効にしました。 私はユーザーが縦と横にスクロールできるようにしようとしているのでFlexsliderを使用しています。あなたにアイデアを与えるために、私はこのウェブサイトに非常に触発され、基本的に同じことを達成しようとしています：http://www.kunstler.it/。

ここで、Flexsliderプラグインには「キーボード」というオプションがあります。これはブール値です。 「真」の場合、ユーザはキーボードの矢印を使用してスライドからスライドに移動できます。 私の問題は、（私が私のウェブサイトの別のセクションにいるときに）視界が外れても、スライダがキーボード入力を登録していて、それが気になることです。ユーザーが見えなくなったときにスライダを操作できるようにする必要はありません。だから私は条件を作るためにプラグイン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つ以上のリンクを投稿することはできません。私はInvieweventを見つけるのが最も難しいので、残りの部分はGoogleから簡単にアクセスできます。私は本当にこれについて残念です。

だからそれについてです...私は明らかにご質問がある場合、または私に正確なものが必要な場合は利用可能です。あなたの英語について心配しないでください：私はそれを書いたよりも良い方法を理解しています。そして最後に ;あなたが技術的に行くことにしたら、私はただコピー/ペーストしたくないので、私に説明してください。しかし、私は自分自身を学び、改善したいと思っています。 は、事前に 真心を込め、 一部唖然男をいただきありがとうございます:)

Answer 1

私はこれを自分で修正することができます。重要なのは、私がしたいことを実行することです：ユーザーがスライドを手動で起動することは不可能です。

私は破壊する方法を含むFlexsliderの修正版（ここでそれを見つける：https://github.com/bradgreens/FlexSlider/tree/release-2-2-0）を使用

をそして私はinvieweventプラグインを使用して、私が欲しかったものを達成するために破壊する方法とそれを組み合わせる：

$('#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(); 
      } 
     }, 
    }); 
}; 

私の考えは、変数を考慮に入れて関数を初期化し直すことでしたが、真実は、ビューの外にあるときにそれを破壊し、ビューが完全に機能するときに初期化することです（非常に短い "pop "初期化時に効果があります - ほとんど見えません）。

希望すると便利です。

Answer 2

あなたが探している機能がインを内蔵していない場合は、プラグインを変更する必要があるとしています。この「キーボード」プロパティは初期化時にのみ使用されているという評価は正しいです - これはjQueryプラグインの共通パターンです。