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，这应该可以正常工作。因为IE8中的querySelectorAll only supports css2选择器。

此外，您不需要调用切片方法，只需像这样直接使用for

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

IE8切片调用问题 - Array.prototype.slice - ＆＃39;这个＆＃39;不是Javascript对象

1 个答案: