0

在我的界面中为按钮“选择所有项目”触发了“点击”事件。此单击事件会触发一个动作以突出显示具有红色背景的所有项目。

它在 Firefox、Opera、IE 中运行良好，但在 Safari 和 Chrome 中却不行。在这些 webkit 浏览器中，单击“全选”按钮后不会出现红色背景。出现按钮单击背景后需要悬停项目。

你能提出任何解决方案吗？

有我的一段js代码：

events: {
        'click .select-all-btn': 'selectAll'
    },
selectAll: function() {
        this.$('.nodebox').addClass('node-to-' + this.action + 'checked').removeClass('node-to-' + this.action + '-unchecked');
    },

和一个适当的CSS：

.node-to-delete-checked .node-select
{
    display: block;
    background-color: rgba(121, 0, 0, 0.25);
}

.node-to-delete-unchecked .node-select
{
    display: none;
}
4

1 回答 1

2

这是一篇非常有用的文章： http: //mir.aculo.us/2009/09/25/force-redraw-dom-technique-for-webkit-based-browsers/

webkit 浏览器（Safari、Chrome）需要强制重绘。在所描述的情况下，“单击”事件正常工作并更改了元素类。但是浏览器并没有根据新的 css 样式重新绘制它以用于更改的类。

有一个小技巧可以解决这个问题：

element.style.webkitTransform = 'scale(1)';

对于我的主干代码，它将是：

selectAll: function() {this.$('.nodebox').addClass('node-to-' + this.action + 'checked').removeClass('node-to-' + this.action + '-unchecked').css('webkitTransform', 'scale(1)');}
于 2012-10-24T11:58:22.107 回答