this.each不是jqm小部件中的函数

Question

我的jqm小部件有些问题。 当我这样做$("div[id=leftSideList]").leftlist('refresh')时，它的工作正常。但是，如果我将代码包含在下面的constraction中，就像这样

function _list (key) {
            switch (key) {
                case 'leftlist':
                    return $("div[id=leftSideList]").leftlist;
                case 'rightlist':
                    return $("div[id=leftSideList]").rightlist;
            }
        }

并使用it _list('leftlist')('refresh')。 它返回错误Uncaught TypeError：this.each不是函数

Answer 1

问题是因为返回的函数（leftlist或rightlist）已失去其范围;函数中的this不再引用div[id="leftSideList"]元素，因此错误。

你可以使用$.proxy解决这个问题，但是它非常丑陋而且对于生产环境来说并不是一个可行的解决方案：

function _list(key) {
  switch (key) {
    case 'leftlist':
      return $.proxy($("div[id=leftSideList]").leftlist, $("div[id=leftSideList]"));
    case 'rightlist':
      return $.proxy($("div[id=leftSideList]").rightlist, $("div[id=leftSideList]"));
  }
}

Working example - 请注意，这使用内置的jQuery方法，因为您没有提供leftlist()和rightlist()的来源。

更好的解决方案是完全避免这种完全不必要的抽象。除了保持所选元素的一致性之外，它不会为您提供任何好处。

function _list(key, action) {
  return $("div[id=leftSideList]")[key](action);
}

_list('leftlist', 'refresh')

最后请注意，使用div[id=leftSideList]是多余且缓慢的。您只需使用#leftSideList即可。您使用属性选择器的唯一原因是，如果您有多个具有相同id属性的元素 - 这是无效的，您应该尽快解决问题。