javascript - IE8 slice 调用问题 - Array.prototype.slice - 'this' 不是 Javascript 对象

Question

这是一个比之前提出的问题更复杂的问题，尝试使用之前给出的答案，但它不起作用。

这是代码

(function () {
    function init() {
        var speed = 330,
            easing = mina.backout;

       [].slice.call(document.querySelectorAll('.grid > a')).forEach(function (el) {
            var s = Snap(el.querySelector('svg')), path = s.select('path'),
                pathConfig = {
                    from: path.attr('d'),
                    to: el.getAttribute('data-path-hover')
                };

            el.addEventListener('mouseenter', function () {
                path.animate({ 'path': pathConfig.to }, speed, easing);
            });

            el.addEventListener('mouseleave', function () {
                path.animate({ 'path': pathConfig.from }, speed, easing);
            });
        });
    }

    init();

})();

Answer 1

只要选择器 ('.grid > a') 符合 CSS2，这应该可以正常工作。因为 querySelectorAll only supports css2 IE8 中的选择器。

而且你不需要调用 slice 方法，直接使用 foreach 就可以了

   [].forEach.call(document.querySelectorAll('.grid > a'), function (el) {
        var s = Snap(el.querySelector('svg')), path = s.select('path'),
            pathConfig = {
                from: path.attr('d'),
                to: el.getAttribute('data-path-hover')
            };

        el.addEventListener('mouseenter', function () {
            path.animate({ 'path': pathConfig.to }, speed, easing);
        });

        el.addEventListener('mouseleave', function () {
            path.animate({ 'path': pathConfig.from }, speed, easing);
        });
    });

更新 - [].forEach 是 compatible with >= IE9

var nodeArray = [].slice.call(document.querySelectorAll('.grid > a'));

for (var i = 0; i < nodeArray.length; i++) {
    var el = nodeArray[i];
    var s = Snap(el.querySelector('svg')),
        path = s.select('path'),
        pathConfig = {
            from: path.attr('d'),
            to: el.getAttribute('data-path-hover')
        };

    el.addEventListener('mouseenter', function () {
        path.animate({
            'path': pathConfig.to
        }, speed, easing);
    });

    el.addEventListener('mouseleave', function () {
        path.animate({
            'path': pathConfig.from
        }, speed, easing);
    });
}