0

選択可能にした li 要素の単純なグリッドがあります。選択が完了したら、それらを繰り返し処理します。ただし、グリッドで複数のボックスを選択すると、要素のコレクションが一連の重複として表示されます。ここで何が起こっているのですか？

例はここにあります

4

3 に答える 3

1

イベントにバインドする代わりに、次のようにselectedイベントにバインドしてみてくださいstop。

stop: function() {
    elements = null;
    elements = $('.ui-selected');
    elements.each(function(idx, item) {
        alert($(item).position().top);

    });
}

選択したイベントは、選択した項目ごとに 1 回発生し、そのたびに関数も実行されるため、選択した項目のリストが構築されます。代わりに stop イベントを使用すると、関数は選択した項目ごとに 1 回だけ実行されます。

jsFiddle の例。

于 2012-05-16T13:38:48.437 に答える
1

コールselectedバックは、選択したアイテムごとに 1 回呼び出されています。そのコールバック内で、選択したすべてのアイテムを照会し、それぞれについてアラートを出します。

最終的な結果として、たとえば 2 つのアイテムを選択するとselected、最初のアイテムに対してコールバックが呼び出され、そのアイテムに対して 1 つのアラートが返されます。次に、コールバックが 2 番目のアイテムに対して呼び出され、その時点で 2 つのアイテムが選択され、さらに 2 つのアラート (合計 3 つ) を受け取ります。3 番目のアイテムを選択すると、6 つのアラートが表示されます。

とにかく、あなたが見ている行動に関して、それが理由の一部です。@ j08691 の回答をチェックして、おそらくあなたが望んでいた動作を示す解決策を見つけてください。

于 2012-05-16T13:39:26.543 に答える
0

選択された関数は、実際には選択された要素ごとに 1 回、複数回呼び出されているようです。

これを確認するためにコードを変更しました：

elements = $('.ui-selected');
console.log(elements);

http://jqueryui.com/demos/selectable/のドキュメントから、「このイベントは、選択に追加された各要素で、選択操作の最後にトリガーされる」ことが示唆されています。あなたが見ているのは期待される動作です。

あなたが望むのは「停止」イベントだと思います：

$("#selectableGrid").selectable({
    stop: function() {
        elements = $('.ui-selected');
        elements.each(function(idx, item) {
            alert($(item).position().top);
        });
    }
});​
于 2012-05-16T13:43:41.593 に答える