Как использовать разные внешние таблицы стилей каждый раз, когда вызывается функция плагина jquery?

Question

Как использовать разные внешние таблицы стилей каждый раз, когда вызывается функция плагина jquery?

0

Я использую jQuery plugin который я написал некоторое время назад; Это плагин с сеткой. Я пытаюсь использовать этот плагин дважды на одной странице с двумя разными div s

Плагин использует External Style sheet

Мне нужно использовать конкретную таблицу внешнего стиля с каждым из плагина gridviews

Страница проходит через массив div и вызывает gridview() которая создает сетку

var divs = ['div1', 'div2'];
//At this point how can i tell it which external style sheet it can use?
 for(var i in divs){ 
        $('#' + divs[i]).gridView({}) ;

как в этом примере:

JSFiddle

Я попытался сделать это

condition ? $('head').append('link to 1st sheet') :
            $('head').append('link to 2st sheet')

и это всегда дает мне 2nd style sheet

Mina Gabriel 02 янв. 2014, в 22:56

Источник

1

На самом деле, используя эту скрипку, загружаются обе таблицы стилей. Но если у них нет разных селекторов, то второй переопределит первый, несмотря ни на что.
Deryck 02 янв. 2014, в 21:14
0

@ У меня нет другого селектора, так как CSS - это селектор классов
Mina Gabriel 02 янв. 2014, в 21:17
0

Дайте div1 идентификатор # div1, и div2 получит # div2. Затем перейдите в таблицу стилей 1 и поместите # div1 перед всем (или в правильной позиции, относящейся к другим селекторам), и сделайте то же самое с листом 2
Deryck 02 янв. 2014, в 21:18
0

@Deryck, к сожалению, div являются динамическими :) должен быть более общий способ сделать это
Mina Gabriel 02 янв. 2014, в 21:29
0

Есть. Вместо этого добавьте классы. Или сделайте это через Javascript, чтобы добавить классы, если вы не можете через HTML. Как и сейчас, ваши селекторы перезаписывают друг друга, так что это единственный способ обойти это.
Deryck 02 янв. 2014, в 21:49

Показать ещё 3 комментария

Теги:

javascript

jquery

css

jquery-plugins

1 ответ

Ещё вопросы

На самом деле, используя эту скрипку, загружаются обе таблицы стилей. Но если у них нет разных селекторов, то второй переопределит первый, несмотря ни на что.
@ У меня нет другого селектора, так как CSS - это селектор классов
Дайте div1 идентификатор # div1, и div2 получит # div2. Затем перейдите в таблицу стилей 1 и поместите # div1 перед всем (или в правильной позиции, относящейся к другим селекторам), и сделайте то же самое с листом 2
@Deryck, к сожалению, div являются динамическими :) должен быть более общий способ сделать это
Есть. Вместо этого добавьте классы. Или сделайте это через Javascript, чтобы добавить классы, если вы не можете через HTML. Как и сейчас, ваши селекторы перезаписывают друг друга, так что это единственный способ обойти это.

tdmartin · Accepted Answer · 2014-01-02T20-40-00.000Z

Просто добавьте класс во время выполнения в каждый список, затем добавьте эти классы ко всем отдельным элементам в CSS.

var divs = ['div1', 'div2'];
//At this point how can i tell it which external style sheet it can use?
 for(var i in divs){ 
        $('#' + divs[i]).addClass('style'+i).gridView({}) ;

затем добавьте стиль + я во все ваши отдельные стили

.style1 .hideDateTimePicker{height:1000px}
.style1 .headerTitle {width:50%;float: left;height:25px;padding-left:10px;padding-top:5px} /*div*/ 
.style1 .headerTitle span {height:24px;padding:1px;padding-right:5px;padding-left:5px;position:relative;font-size:100%;color:#3a3a3a;font-weight:bold;}

и так далее. Я бы рекомендовал использовать scss для упрощения добавления css.