CSS/yenilemek bazı stilleri ile bir görünüm elemanlarının <code>data-attribute</code> bağlı olduğu bir HTML5/JS uygulamasında

Question

yeniden boyamak olmaz:

<li data-level="0"></li> 

veya

<li data-level="1"></li> 

gibi

CSS

li[data-level^="1"] { 
    /* some styles */ 
} 

Bu, her yerde page reload numaralı telefondan çalışıyor.

Ancak, veri niteliği program aracılığıyla JS yoluyla ayarlandığında, CSS özellikleri tüm ilgili masaüstü tarayıcılarında oluşturulur, ancak mobil safaride olmaz.

JS parçası gibidir: bu özellikleri (yenileme/şey yeniden boyamak) uygulamak zorlamak için nasıl

this.$el.attr('data-level', this.model.getLevel()) 

Herhangi bir fikir?

İşlerin burada gösterilen daha karmaşık olarak sınıf özniteliğin ve farklı sınıfları kullanmaktan kaçınmak istiyorum ...

Answer 1

Tamam, verileri değiştirme basitçe tüm elemanın bir yeniden düzenleme tetiklemek görünmüyor öznitelikleri tarayıcılar!

Ancak, class özniteliğini değiştirmek yapar. Bir geçici çözüm, ancak hile yapar.

this.$el 
     .attr('data-level', this.model.getLevel()) 
     .addClass('force-repaint') 
     .removeClass('force-repaint'); 

burada görüldüğü gibi: Changing a data attribute in Safari, but the screen does not redraw to new CSS style