0

jQueryUI関数を次のように使用しています。

$('.droppable').droppable({
    tolerance: 'touch',
    over: function () {
        var hasHiddenList = $(this).children('ul.hidden');
        if (hasHiddenList.length)
            hasHiddenList.removeClass('hidden');
    },
    out: function () {
        var hasEmptyList = $(this).children('ul.empty');
        if (hasEmptyList.length)
            hasEmptyList.addClass('hidden');
    },
    drop: function () {
        var hasEmptyList = $(this).children('ul.empty');
        if (hasEmptyList.length)
            hasEmptyList.removeClass('empty');
    }
});

hasHiddenListそして、それらすべてで同じ変数であるため、変数とhasEmptyListコールバック関数の外部を定義できるかどうか疑問に思っています。

4

2 に答える 2

5

さらに良いことに、ifステートメントや変数も必要ありません。

$('.droppable').droppable({
    tolerance: 'touch',
    over: function () {
      $(this).children('ul.hidden').removeClass('hidden');
    },
    out: function () {
      $(this).children('ul.empty').addClass('hidden');
    },
    drop: function () {
      $(this).children('ul.empty').removeClass('empty');
    }
});
于 2012-12-13T13:20:05.977 に答える
1

本当に変数が必要な場合は、2つのオプションがあります。

明らかなもの（落とし穴あり）はこれです：

var hasHiddenList = $('.droppable').children('ul.hidden');
var hasEmptyList = $('.droppable').children('ul.empty');

$('.droppable').droppable({
    tolerance: 'touch',
    over: function () {
        if (hasHiddenList.length)
            hasHiddenList.removeClass('hidden');
    },
    out: function () {
        if (hasEmptyList.length)
            hasEmptyList.addClass('hidden');
    },
    drop: function () {
        if (hasEmptyList.length)
            hasEmptyList.removeClass('empty');
    }
});

変数が抽出され、コードの繰り返しが少なくなりました。すべて良い。

ここでの問題は、セレクターが1回だけ実行されることです。コールバックover、outおよびdropは、これらのイベントの1つが発生するたびに呼び出されますが、hasHiddenList更新hasEmptyListされません。それらは、すべての呼び出し間で同じものになります。おそらくあなたが望むものではありません。

これを修正する方法は、次のように変数の代わりに関数を使用することです。

var hiddenList = function(target) {
    return $(target).children('ul.hidden');
};
var emptyList = function(target) {
    return $(target).children('ul.empty');
};

$('.droppable').droppable({
    tolerance: 'touch',
    over: function () {
        var list = hiddenList(this);
        if (list.length)
            list.removeClass('hidden');
    },
    out: function () {
        var list = emptyList(this);
        if (list.length)
            list.addClass('hidden');
    },
    drop: function () {
        var list = emptyList(this);
        if (list.length)
            list.removeClass('empty');
    }
});

これにより、クエリの実行方法が抽象化されます（$(target).children('ul.empty');2回ではなく1回だけ記述する必要があります）が、実際にはコードは実際には単純になっていません。実は今はなかなかフォローしづらいと言っても過言ではありません。一方、同じセレクターを2回以上、たとえば5回使用している場合は、これが実際に役立つ可能性があります。

また、変数名から「has」を削除したことに注意してください。「has」を使用すると、ブール値のように聞こえますが、そうではありません。それらは要素のリストです。

于 2012-12-13T13:39:55.910 に答える