IE8切片调用问题-- Array.prototype.slice --“这”不是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 只支持css2选择器在IE8中。

此外，您不需要调用片方法，只需直接使用

   [].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);
    });
}