javascript - 我有一个函数带有一些在 Firefox 上不工作的数据属性

Question

给你一些背景。我有一张带有特定边框颜色的人的照片，当您单击该图片时，它会打开一个具有相同图片和相同边框颜色的新面板。它在 Chrome 上运行正常，但在 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" />

.user__picture 的默认 css

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

这是屏幕截图中所选图片的默认颜色:

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

因此，如您所见，这是与该问题相关的全部代码，但在 Firefox 上无法正常工作。

有什么建议吗？

Answer 1

您可以尝试在您的 css 中添加 !important 规则，我认为 firefox 正在读取您的默认 css。

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

希望对您有所帮助! :)