javascript - 如何在每次调用 jquery 插件函数时使用不同的外部样式表？

Question

我正在使用我不久前编写的jQuery 插件；它是一个 GridView 插件。我试图在同一个页面上使用这个插件两次，有两个不同的 divs

插件正在使用外部样式表

我需要为每个 gridviews 插件使用特定的外部样式表

页面循环遍历 div 数组，并调用创建 GridView 的 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')

这总是给我第二个样式表

Answer 1

只需在运行时向每个列表添加一个类，然后将这些类添加到 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({}) ; 

然后将 style+i 添加到所有不同的样式中

.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 的方式更容易。