javascript - 如果在 IE11 中键入对象错误 - 意外的标识符、字符串或数字

Question

我已经测试了这段代码，它在所有版本的 Edge、Firefox 和 Chrome 中都能完美运行，但在 IE11 或更早版本中无法运行。我希望找到我的问题或创建可以在旧浏览器中工作的更好版本。我有一些客户拒绝升级，不要问哈哈。

收到错误:意外的标识符、字符串或数字

我在谷歌上唯一能找到的是它引用了尾随逗号，但我在下面的代码中没有任何逗号。我注释掉了损坏的部分。

// Slideshow System
var s =  Foundation.MediaQuery.get('medium').match(/\(([^)]+)\)/)[1].replace('em','').split(' ');
var small = (s[(s.length-1)]*16);
var m = Foundation.MediaQuery.get('large').match(/\(([^)]+)\)/)[1].replace('em','').split(' ');
var medium = (m[(m.length-1)]*16);
$('.omada-ss').each(function(){
    var x  = $(this); 
    if(x.attr("id") !== undefined){ var id = x.attr('id'); }else{
        var id = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        for (var i = 0; i < 5; i++){ id += possible.charAt(Math.floor(Math.random() * possible.length));}           
        x.attr('id',id);
    }
    if (!x.hasClass("swiper-container")){ x.addClass('swiper-container'); }
    if(x.find('div.swiper-wrapper').length == 0){ x.wrapInner('<div class="swiper-wrapper"></div>'); }
    x.find('.swiper-wrapper>div').each(function(){ if(!$(this).hasClass("swiper-slide")){ $(this).addClass('swiper-slide');} });
    if(x.hasClass('has-text')){ x.find('.spiper-slide').each(function(){ $(this).wrapInner('<div class="swiper-text"></div>'); }); }
    if(x.data("options") !== undefined){ var options = film = x.data("options"); }
    else{ var options = film = {autoplay: { delay: 2500, disableOnInteraction: true } } }
    /*
    if('breakpoints' in options){ options.breakpoints = { [medium] :options.breakpoints.medium, [small] : options.breakpoints.small }; }
    if('spaceBetween' in options){ options.spaceBetween = parseInt(options.spaceBetween); }
    if('pagination' in options){ x.append('<div class="swiper-pagination"></div>'); }
    if('navigation' in options) { x.append('<div class="swiper-button-next"></div><div class="swiper-button-prev"></div>'); }
    if('speed' in options){ options.speed=film.speed=parseInt(options.speed); }
    */
    var swiper = new Swiper('#'+id,options);
    if('filmstrip' in film){
        delete film.navigation;
        delete film.pagination;
        /*
        if('breakpointsbs' in film){
            film.breakpoints={ [medium] :film.breakpointsbs.medium, [small] : film.breakpointsbs.small };
            film.slidesPerView = parseInt(film.breakpointsbs.large.slidesPerView);
            film.centeredSlides=true;
            delete film.breakpointsbs;
        }
        */
        film.touchRatio=0.2;
        film.slideToClickedSlide=true;  
        var thumbs = new Swiper('#'+id+'-filmstrip', film);
        swiper.controller.control = thumbs;
        thumbs.controller.control = swiper;
    }
    if('pauseonhover' in options){ x.hover(function(){swiper.autoplay.stop();},function(){swiper.autoplay.start();}); }
}); 

下面是一个带有类和选项的示例 div

<div id="UBMoSlzKfT" class="swiper-container omada-ss" data-options='{"pauseonhover":true,"autoplay":{"delay":"5000","disableOnInteraction":false},"loop":true,"speed":"2000","navigation":{"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"},"keyboard":{"enabled":true}}'>
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
</div>

Answer 1

问题是您正在使用 Object Initializer Spec 的“计算属性”在 film.breakpoints 对象中，即 NOT supported in IE11 。 IE11 将无法动态解析对象属性键，例如 [medium] 和 [small]。如果您计划支持 IE11 或使用 Babel 等工具来转译该功能，则需要替换它。

您可以尝试将括号符号与“动态”变量相结合来相应地设置值。在下面的示例中，在对 film.breakpoints 对象设置属性之前，会先评估 [small] 和 [medium]:

film.breakpoints[medium] = film.breakpointsbs.medium;
film.breakpoints[small] = film.breakpointsbs.small;

var small = 600;

var film = {
  breakpoints: {
    1024: {
      "name": "desktop"
    },
    768: {
      "name": "tablet"
    }
  }
};

film.breakpoints[small] = { name: 'phablet' };

console.log(film.breakpoints);

希望有帮助!