Question

这里看似简单的问题：我试图使用一些jQuery / vanilla JS创建一个简化的方法来隐藏/显示DOM元素的集合。这是来自一个重构，其中几个碎片功能被重新完成，作为他们以前的自我的更好的封装版本。

这些函数正在尝试做什么从数组中获取元素（通过ID），使用map将它们转换为jQuery对象，然后隐藏或显示它们。

在Angular项目中使用jQuery 1.11，但角度方面似乎不会干扰这种情况，因为它也不会在jsFiddle中工作。

主要问题：当我运行该功能时（通常使用点击事件），我不会从控制台收到任何错误，而且我没有得到任何类型的错误结果也是DOM。有任何想法吗？我确定这是一件我想念的简单事情，但我还需要其他的眼睛。

这里有一个jsFiddle，下面加载了代码，准备好修复＆＃39;。谢谢！

function showItem(item) {
  return item.show();
}

function hideItem(item) {
    return item.hide();
}

function showItemsWithIDs(ids) {
  ids.map($).forEach(showItem);
}

function hideItemsWithIDs(ids) {
  ids.map($).forEach(hideItem);
}

var itemsHiddenToFocusTribute = ['#form', '#ask', "#submitButton", "#sidebar",           "#AmountCtrl", "#giftbutton"];

Answer 1

看来只有数组中的第一个元素实际上被转换为代码中的jQuery对象。

以下是发生的事情：vanilla-JS .map passes three arguments to the specified callback function：当前元素，索引和数组。

如果回调函数只接受一个参数，则忽略第二个和第三个参数。但是， jQuery的$实际上允许两个参数： a selector, and a context（容器元素）。所以你的代码传递（作为第二个参数）数组索引作为上下文，导致一个空的jQuery对象 - 除itemsHiddenToFocusTribute中的第一个元素，其索引0被解释为没有任何背景。

您可以使用仅将选择器字符串传递给$的匿名函数来解决此问题：

function hideItemsWithIDs(ids) {
    ids.map(function (i) {
        return $(i);
    }).forEach(hideItem);
}

http://jsfiddle.net/mblase75/e23qgad5/

然而，更友好的jQuery方法是创建所有所需元素的单个jQuery对象，并使用.each循环它们：

function hideItem(i,item) {
    return $(item).hide();
}

function hideItemsWithIDs(ids) {
    $(ids.join()).each(hideItem);
}

http://jsfiddle.net/mblase75/mm2L4xn1/

这也可能更高效，因为您只需拨打一次$而不是array.length次。

Answer 2

您想要的是通过foreach循环发送每个ID吗？然后我就这样使用each：

$(ids).each(function(index, id) {
    hideItem(id);
});

您不需要使用map($)将它们转换为jQuery对象，只需将对象放入美元符号函数调用中，如下所示：$(ids)。

另外，请确保在调用时将实际ID传递给showItem和hideItem，如下所示：hideItem(id)。您还需要确保在hideItem和showItem函数中使用jQuery对象。我将您的代码更改为：

function showItem(item) {
    return $(item).show();
}

function hideItem(item) {
    return $(item).hide();
}

function showItemsWithIDs(ids) {
    $(ids).each(function(index, id) {
        showItem(id);
    });
}

function hideItemsWithIDs(ids) {
    $(ids).each(function(index, id) {
        hideItem(id);
    });
}

var itemsHiddenToFocusTribute = ['#form', '#ask', "#submitButton", "#sidebar", "#AmountCtrl", "#giftbutton"];


$('#clicker').click(function(){
    hideItemsWithIDs(itemsHiddenToFocusTribute);
});

这里有更新的Fiddle

使用Hide（）/ Show（）隐藏数组中的jQuery元素集合

2 个答案: