Jquery添加css但不添加&xB4；t OVERWRITE旧值

对于一个小小的CSS3字体测试仪，我有几个复选框可以将Opentype StyleSet功能添加到文本区域。目前，我通过添加一个带有jquery的类来实现这一点，如：

$( "#fontform" ).addClass( "ss01" );

其中类看起来像：

.ss01 {
    -moz-font-feature-settings: "ss01";
    -webkit-font-feature-settings: "ss01";
    font-feature-settings: "ss01";
}

问题是，如果单击下一个复选框f.e.

font-feature settings

，ss02的上一个值将被覆盖。jquery是否有一些方法可以添加如下值：

.appliedstylies {
    -moz-font-feature-settings: "ss01","ss02";
    -webkit-font-feature-settings: "ss01","ss02";
    font-feature-settings: "ss01","ss02";
}

---

谢谢

如果在

字体功能设置的类列表中未找到该类，则可以尝试附加该类：

function appendClass(c){
    var styles = $('#fontform').css('font-feature-settings');
    //Check for class in current setting
    if(styles && !styles.contains(c)){
        styles += ',"' + c + '"';
        $('#fontform').css({
            'font-feature-settings': styles,
            '-moz-font-feature-settings': styles,
            '-webkit-font-feature-settings': styles
        });
    }
}

如果在
字体功能设置的类列表中尚未找到该类，则可以尝试附加该类：

function appendClass(c){
    var styles = $('#fontform').css('font-feature-settings');
    //Check for class in current setting
    if(styles && !styles.contains(c)){
        styles += ',"' + c + '"';
        $('#fontform').css({
            'font-feature-settings': styles,
            '-moz-font-feature-settings': styles,
            '-webkit-font-feature-settings': styles
        });
    }
}

如果要切换选项，可以执行此操作


$（文档）.ready（函数（）{
var数组=[]；
$（“.btn”）。单击（函数（）{
var data=“””+$（此）.data（“值”）+“，
index=array.indexOf（数据），
风格与价值；
如果（索引==-1）{
array.push（数据）；
}否则{
阵列拼接（索引1）；
}
如果（array.length>0）{
style_value=array.join（“，”）；
$（“#目标”）.attr（'style'，
-moz字体功能设置：“+style_value+”；”+
-webkit字体功能设置：“+style_value+”；”+
“字体功能设置：”+样式值）+“；”
}否则{
$（“#目标”）.attr（‘风格’，“”）；
}
$（'#target span'）.html（$（'#target'）.attr（'style'））
console.log（索引）
console.log（数据）
console.log（数组）
console.log（样式值）
});
});
#目标{
边框：1px点黄色；
填充物：5px；
背景：浅黄色；
边缘底部：10px；
}
#目标跨度{
显示：块；
字体大小：13px；
字体系列：Consoleas、Menlo、摩纳哥、Lucida Console、Liberation Mono、DejaVu Sans Mono、Bitstream Vera Sans Mono、Courier New、monospace、Sans serif；
颜色：#222；
}
.btn
{
显示：内联块；
文本对齐：居中；
填充：10px；
边缘底部：10px；
背景：#eee；
边框：1px实心#ccc；
}

风格：
ss01
ss02
ss03
如果要切换选项，可以执行此操作


$（文档）.ready（函数（）{
var数组=[]；
$（“.btn”）。单击（函数（）{
var data=“””+$（此）.data（“值”）+“，
index=array.indexOf（数据），
风格与价值；
如果（索引==-1）{
array.push（数据）；
}否则{
阵列拼接（索引1）；
}
如果（array.length>0）{
style_value=array.join（“，”）；
$（“#目标”）.attr（'style'，
-moz字体功能设置：“+style_value+”；”+
-webkit字体功能设置：“+style_value+”；”+
“字体功能设置：”+样式值）+“；”
}否则{
$（“#目标”）.attr（‘风格’，“”）；
}
$（'#target span'）.html（$（'#target'）.attr（'style'））
console.log（索引）
console.log（数据）
console.log（数组）
console.log（样式值）
});
});
#目标{
边框：1px点黄色；
填充物：5px；
背景：浅黄色；
边缘底部：10px；
}
#目标跨度{
显示：块；
字体大小：13px；
字体系列：Consoleas、Menlo、摩纳哥、Lucida Console、Liberation Mono、DejaVu Sans Mono、Bitstream Vera Sans Mono、Courier New、monospace、Sans serif；
颜色：#222；
}
.btn
{
显示：内联块；
文本对齐：居中；
填充：10px；
边缘底部：10px；
背景：#eee；
边框：1px实心#ccc；
}

风格：
ss01
ss02
ss03
那么您希望应用这两种样式，并且只有这两种样式的组合？或者您只想显示第一个样式？通过
.css（）
更新/添加单个样式元素对您有用吗？这更像是一个css问题，而不是jquery…@ntgCleaner是的，应该是框样式的混合。最有可能的做法是向元素添加/编辑内联样式，如
style=“font-feature settings:“ss01”、“ss02”；“
，但最有可能的是我必须为其编写一些正则表达式。也许jquery？S.Kiers有更简单的方法，我不这么认为，因为主要的问题是如何修改DOMS，所以您希望应用这两种样式，并且只有这两种样式的混合？或者您只想显示第一个样式？通过
.css（）
更新/添加单个样式元素对您有用吗？这更像是一个css问题，而不是jquery…@ntgCleaner是的，应该是框样式的混合。最有可能的做法是向元素添加/编辑内联样式，如
style=“font-feature settings:“ss01”、“ss02”；“
，但最有可能的是我必须为其编写一些正则表达式。也许jquery？S.Kiers有更简单的方法，我不这么认为，因为主要的问题是如何修改DOM应该优化，我把它做得很详细以便更容易理解。应该优化，我把它做得很详细以便更容易理解。