Question

我试图移植jQuery插件我必须与AngularJS JQlite API兼容，但遇到了一些障碍。这是插件：

    (function (e) {

    var $product = $('#product'),
        $imgs = $product.find('.child'),
        imageTotal = $imgs.length - 1,
        clicked = false,
        widthStep = 4,
        currPos,
        currImg = 0,
        lastImg = 0;
    $imgs.bind('mousedown', function (e) {
        e.preventDefault(); // prevent dragging images
    })
        .filter(':gt(0)').addClass('notseen');

    $product.bind('mousedown touchstart', function (e) {
        if (e.type == "touchstart") {
            currPos = window.event.touches[0].pageX;
        } else {
            currPos = e.pageX;
        }
        clicked = true;

    });
    $(document)
        .bind('mouseup touchend', function () {
        clicked = false;
    })
        .bind('mousemove touchmove', function (e) {
            fadeInOut();
        if (clicked) {
            var pageX;
            if (e.type == "touchmove") {
                pageX = window.event.targetTouches[0].pageX;
            } else {
                pageX = e.pageX;
            }
            widthStep = 4;
            if (Math.abs(currPos - pageX) >= widthStep) {
                if (currPos - pageX >= widthStep) {
                    currImg++;
                    if (currImg > imageTotal) {
                        currImg = 0;
                    }
                } else {
                    currImg--;
                    if (currImg < 0) {
                        currImg = imageTotal;
                    }
                }
                currPos = pageX;
                $imgs.eq(lastImg).addClass('notseen');
                $imgs.eq(currImg).removeClass('notseen');
                lastImg = currImg;
                // $obj.html('<img src="' + aImages[options.currImg] + '" />');
            }
        }
    });


});

所有这一切都在创造360度旋转效果，可以演示 here 。

现在问题是这些jquery特定的API中的一些。像.filter(':gt(0)')这样的东西来选择索引大于0的数组中的项目和pageX。我已经对.filter(':gt(0)')和came across a native javascript method of filtering进行了一些研究，但它似乎只过滤了一个特定的索引（索引为2,6,13，而不是> 0）。

有关如何以纯javascript格式实现此过滤器的任何想法？任何帮助表示赞赏。

Answer 1

您可以使用[].slice来获取数组的所有索引大于n，而不是使用过滤器。

$([].slice.call($imgs,1)).addClass("notseen");

http://jsfiddle.net/rm5PC/

这也适用于jquery：

http://jsfiddle.net/rm5PC/1/

Answer 2

过滤器只是遍历元素列表并根据选择器过滤它们。因为你只需要检查gt（0），它基本上是除了第一个元素之外的所有元素，你可以用for循环替换过滤器并跳过第一个元素。 e.g。

for (var i=1; i<$imgs.length; i++){
    $($imgs[i]).addClass('notseen');
}

以下是http://jsfiddle.net/gdMgp/

中的示例

Answer 3

您可以执行与SO question you mentioned类似的操作，但在回调中添加其他参数。该额外的参数将被视为索引而不是值。

var filteredArray = array.filter(function(x, y) { return y > 0;})会filteredArray array中的所有值都大于索引0。

如何在vanilla javascript中实现sizzle：gt过滤器

3 个答案: