jquery添加css但不ovverwrite舊值

Question

爲一個小CSS3字體測試儀我有幾個複選框添加Opentype stylisticSet功能到一個textarea。 Currentliy I'm通過添加類像jQuery這樣做：

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

，其中類的樣子：

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

這樣做的問題是如果一個人點擊旁邊的複選框F.E.對於ss02，先前的值font-feature-settings被覆蓋。有沒有辦法用jquery添加如下值：

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

謝謝！

Answer 1

，如果你想切換選項你可以做到這一點。

$(document).ready(function() { 
 
    var array = []; 
 
    
 
    $(".btn").click(function() { 
 
    var data = "'" + $(this).data("value") + "'", 
 
     index = array.indexOf(data), 
 
     style_value; 
 
    
 
    if (index == -1) { 
 
     array.push(data); 
 
    } else { 
 
     array.splice(index, 1); 
 
    } 
 

 
    if (array.length > 0) { 
 
    style_value = array.join(","); 
 
     $("#target").attr('style', 
 
     "-moz-font-feature-settings:" + style_value + ";" + 
 
     "-webkit-font-feature-settings:" + style_value + ";" + 
 
     "font-feature-settings:" + style_value) + ";" 
 
    } else { 
 
     $("#target").attr('style',''); 
 
    } 
 
    $('#target span').html($('#target').attr('style')) 
 
    console.log(index) 
 
    console.log(data) 
 
    console.log(array) 
 
    console.log(style_value) 
 
    
 
    }); 
 
});

#target { 
 
    border:1px dotted yellow; 
 
    padding:5px; 
 
    background:lightyellow; 
 
    margin-bottom:10px; 
 
} 
 
#target span { 
 
    display:block; 
 
    font-size:13px; 
 
    font-family:Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif; 
 
    color:#222; 
 
    } 
 
.btn 
 
{ 
 
    display:inline-block; 
 
    text-align:center; 
 
    padding:10px; 
 
    margin-bottom:10px; 
 
    background: #eee; 
 
    border:1px solid #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="target">Style: <span></span></div> 
 

 
<div class="btn" data-value="ss01">ss01</div> 
 
<div class="btn" data-value="ss02">ss02</div> 
 
<div class="btn" data-value="ss03">ss03</div>

Answer 2

你可以嘗試追加類如果沒有類列表已經找到它font-feature-settings：

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 
     }); 
    } 
}