0

我有以下使用 jQuery UI 功能：

$('.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

如果您真的非常想要变量，有两种选择。

显而易见的一个（有陷阱）是这样的：

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');
    }
});

变量已提取，代码重复性较低。都好。

现在，问题是选择器只运行一次。每次发生这些事件之一时都会调用回调over，但不会更新；在每次调用之间它们仍然是相同的。可能不是你想要的。outdrophasHiddenListhasEmptyList

解决这个问题的方法是使用函数而不是变量，如下所示：

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');一次而不是两次），但实际上代码并没有真正变得更简单。实际上，我什至会说现在更难遵循它。另一方面，如果您使用相同的选择器甚至超过两次，比如说五次，那么也许这实际上是有用的。

另外，请注意，我已经从变量名中删除了“has”，因为“has”听起来像是布尔值，但它们不是。它们是元素列表。

于 2012-12-13T13:39:55.910 回答