我有一个功能需要一些不适用于Firefox的数据属性。

给你一些上下文。我有一个具有特定边框颜色的人的照片，当您单击该图片时，它会用相同的图片和相同的边框颜色打开一个新面板。它在Chrome上正常工作，但不在Firefox上正常工作。我有一个功能需要一些不适用于Firefox的数据属性。

这是在Chrome：

而且这是在Firefox上：

正如你可以看到，在Firefox浏览器在左侧不同的边框颜色（黑色）这是对图片我提到的新小组。

这是JS函数，该函数的主画面的边框颜色，并把它放在侧面板的画面：

var showInfo = function (evt) { 
    //console.log("---"+evt); 
    evt.preventDefault(); 
    var id = this.parentNode.id; 
    var info = APP.chart.getUser(id) || {}; 
    info['class'] = $(this).data('class'); 
    if($(this).parent().parent().hasClass('disabled') !== true){ 
     APP.sidebar.load(info); 
    } 
}; 

var circleColor = function() { 
    $('[data-action="user-picture-chart"]').click(function(e) { 
     $('[data-action="user-picture-sidebar"]').css('border-color', $(e.target).css('border-color')); 
    }); 
}; 

var bindEventsToUI = function() { 
    $('.js-user-info img').on('click', showInfo); 
    $('.js-user-info strong').on('click', showInfo); 
    circleColor(); 
};

这是主画面模板：

<img class="user__picture" data-action="user-picture-chart" 
    src="assets/images/profile-picture/{{this.picture}}" />

这是左侧面板中的模板：

<img class="user__picture" src="{%picture%}" data-action="user-picture-sidebar" />

默认的CSS的.user__picture

&__picture { 
    border: 4px solid #000; 
}

而且这是在选择截图图片的默认颜色：

&--mngr { 
    .user__picture { 
     border-color: #bebebe; 
    } 
}

所以，你可以看到，这是有关这一问题的整个代码是不在Firefox上工作。

有什么建议吗？

来源

2017-05-29 TheUnnamed

在'circleColor'函数中，e.target是否在Firefox和Chrome中进行调试时具有相同的元素/节点？同时检查'$（'[data-action =“user-picture-sidebar”]'）'是否在Firefox和Chrome中返回相同的内容。 – damanptyltd

你可以尝试在你的css中添加！重要的规则，我想firefox正在读你的默认css。

&--mngr { 
    .user__picture { 
     border-color: #bebebe!important; 
    } 
}

希望这会有所帮助！ :)

来源

2017-05-30 00:01:26

我有一个功能需要一些不适用于Firefox的数据属性。

回答

相关问题