javascript - 如何实现sizzle的:gt filter in vanilla javascript

标签 javascript jquery angularjs

我正在尝试移植一个 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 格式实现此过滤器的任何想法?感谢您的帮助。

最佳答案

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

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

http://jsfiddle.net/rm5PC/

这在 jquery 中也有效:

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

关于javascript - 如何实现sizzle的:gt filter in vanilla javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22617667/

相关文章:

javascript - 那个 js 表达式安全吗 : if( ! x || doSomething( x[prop], y[prop] ) === false )

javascript - Amazon aStore 的动态高度

javascript - jQuery:在父元素中查找冒泡事件的触发元素

php - 在php和jquery中显示隐藏扩展的动态层次树结构

angularjs - UI Router 匹配 url 和哈希(片段)

javascript - Angular2 中 Angular 的 $q 等价于什么?

javascript - Google 可视化 Barformat 选项

javascript - 将不同的数字存储到一个数组中

javascript - JQuery Datatable 插件在 CodeIgniter 3.x 中无法正常工作

javascript - Angularjs - 在按键上触发 ng-click 方法