0

jqueryで単純なユーザークリックアクションレコーダーを作成しようとしていますが、問題が発生しています。ユーザーに記録ボタンをクリックしてもらい、一度クリックすると、クリックした内容を記録します。次に、停止ボタンを押して記録を停止します。私がこれまでに持っているのは：

var stack = new Array();
var recordmode = false;

$('#record').click(function(){
recordmode = true;
alert('You are now in record mode');
});

$('#stop').click(function(){
recordmode = false;
console.log(stack);//output what's in the array
stack = []; //erase the array
});


$('#note_markers').click(function(){
if(recordmode){
$('.one_0').click( function(){ stack.push('one_0'); })
$('.one_1').click( function(){ stack.push('one_1') ; })
}
});

その後、開始ボタンと停止ボタン。

<a id='record'>R</a>
<a id='stop'>stop</a>
                           <div id="one_notes">
                                <a class="one_0"></a>
                                <a class="one_1"></a>
                                <a class="one_2"></a>
                                <a class="one_3"></a>
</div>

また、配列を停止して消去する前に、配列に記録されているものを使用して/ one_0 / one_1/one_0などの形式のURLを作成したいと思います。（まだその部分に到達していませんが）

最初のクリックは記録されず、その後、同じ要素を2つ入力し始めます。なぜ現在の動作を取得しているのか理解できません。

何か案は？

補足として、クリックされた要素の名前を取得する方法はありますか？

4

2 に答える 2

1

追跡するアクションごとにクリックハンドラーを分離してみてください。

$('.one_0').click( function(){ 
    if(recordmode){
      stack.push('one_0'); 
    }
});

$('.one_1').click( function(){ 
    if(recordmode){
      stack.push('one_1'); 
    }
});

重複したコードがたくさんあるようです...少しクリーンアップしてみましょう。それをさらに一歩進めて、すべての「記録可能な」アクションに、relおそらく一意の属性を持つ同じクラスを与えてみませんか...

最新の1.7以降のjQuery構文を使用します。

<a class="recordable" rel="one_1"></a>
<a class="recordable" rel="one_2"></a>

$('.recordable').on('click', function(){ 
    if(recordmode){
      stack.push($(this).attr('rel'); 
    }
});

結果のアクションの配列からURLを構築する限り、JavaScriptjoin()関数を使用できます。

var targetURL = _base_url + stack.join('/');

上記のコメントに記載されている方法で、任意の要素のクリックをキャプチャできます...ただし、キャプチャするアクションを正確にマークすることをお勧めします。すべてをキャプチャする必要はありません...

于 2012-04-25T21:17:51.117 に答える
1

問題は、バブルが発生したときに#note_markersクリックが発生し、クリックが発生することです。.one_1

これを試して：

$('#note_markers a').click(function(){
    if(recordmode)
        stack.push($(this).attr('class'));
});

イベントリスナーを変更して、実際に必要なものをリッスンすることができますが、これにより、提供されたhtmlに基づいて必要な処理が実行されます。

于 2012-04-25T21:35:07.197 に答える