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 に答える