JavaScriptでクリックを追跡する方法を探しています。私は別々のdivラッパーに一連のjavascript制御側を持っています。クリックされた前のスライド番号を追跡するカウンターが必要です。これは、新しいdivがロードされたときに前のdivをフェードアウトするために使用されます。HTMLページはリロードされないので、ブラウザの履歴機能をオプションとして使用することはできないと思います。スライド番号はクリックして順番にクリックできるので、実際には前のスライド番号を知っているだけで済みます。
3 に答える
新しいスライドがクリックされるたびに変数を作成して更新することもできますが、すべてのスライドをフェードアウトしてから、クリックされたスライドをフェードインする方が簡単だと思います。
これにより、現在どのスライドが表示されているかを知る必要がなくなります。
レオン
ユーザーがページを再読み込みしないと予想される場合、通常の JavaScript 変数を単純に使用できない理由は何でしょうか?
var currentSlideIndex = 0;
function nextSlide() {
currentSlide = currentSlide + 1;
if (currentSlide >= slideCount) {
currentSlide = 0;
}
}
多くの同様の HTML5 スライド パッケージがあることがわかります。ブラウザのドキュメント フラグメント識別子で現在のスライドを追跡します。これを行うと、スライドショーは F5 キーを押しても存続し、ユーザーはアドレスをコピーして貼り付けることで現在のスライドへのリンクを送信できます。
最良のオプションはHistory.jsを使用することですが、これは少しやり過ぎです。ボーナスは、それがセマンティックであり、ブラウザーのリロード時に状態を維持することです。また、戻るボタンは前のタブに移動します。
他の解決策は、セットアップと利用可能なライブラリ (jQuery など) によって異なります。何かに標準プラグインを使用している場合、通常、状態が変化したときのコールバックがあります。API を確認してください。
基本的なアルゴリズムは、各ボタンにクリック ハンドラーを適用することです。現在の状態を含むグローバル変数を保存できます。.slideButtons
絶対ボタン (page1、page2、page3 など) にクラス likeを付与し、次と前のボタンに選択的に id と を#nextSlide
付与します。#prevSlide
ハンドラーで、クラスと ID を確認します。nextSlide または prevSlide の場合は、1 を足すか、1 を引いて更新します。絶対クラスの 1 つである場合は、親ノードを検索し、探しているクラスが見つかるまで一致するクラスを数えます。押されたボタンに到達したときのカウンターの数が新しい状態です。それを設定し、スライダーを更新します。