添加插圖到box-shadow屬性在jQuery的更新動態

Question

我有這樣的事情：

$('.inset').click(function(){ 

    if($('.inset').is(':checked')){ 
     $('.box-shadow').css('boxShadow','inset'); 
    }else{ 
     $('.box-shadow').css('boxShadow',''); 
    } 
}); 

也就是說，基本上，當複選框被選中做財產以後，當它不檢查的話做另一件事。

嗯，我想要做的是，當複選框被選中，在boxShadow特性（實際上是：box-shadow: 5px 5px 5px #000;更改爲box-shadow: inset 5px 5px 5px #000;，當它不檢查，返回更改：box-shadow: 5px 5px 5px #000;

這可能是簡單，但問題是，其他屬性（爲5px 5px的5px的＃000），AR並不總是相同的，因此，有一種方法可以做這樣的事情

$('.inset').click(function(){ 

     if($('.inset').is(':checked')){ 
      $('.box-shadow').css('boxShadow','+inset'); 
     }else{ 
      $('.box-shadow').css('boxShadow','-inset'); 
     } 
    }); 

Answer 1

你可以試試這個：

$('.inset').on('change', function(){ 
    $('.box-shadow').css('boxShadow', function(i,old) { 
     return old.indexOf('inset') === -1 ? old + ' inset' : old.replace(/\s+inset/,'') 
    }); 
}); 

基本上 '開' 和使用 'CSS' 從jQuery和JavaScript中 '代替'， '的indexOf'！

Answer 2

你可以這樣做：

$('.inset').click(function(){ 
    if($('.inset').is(':checked')){ 
     $('.box-shadow').css('box-shadow','inset 5px 5px 5px #000'); 
    }else{ 
     $('.box-shadow').css('box-shadow','5px 5px 5px #000'); 
    } 
}); 

或者製作兩個CSS類，一個插入一個，一個沒有，只需在它們之間切換。

Answer 3

最簡單的方法是：

$('.inset').on('change', function(){ 
    $('.box-shadow').css('boxShadow', function(i,old) { 
     return old.indexOf('inset') === -1 ? old + ' inset' : old.replace(/\s+inset/,'') 
    }); 
}); 

JS Fiddle demo。

參考文獻：

• 的jQuery：
  • css()。
  • on()。
• 的JavaScript：
  • (JavaScript) Regular Expressions。
  • String.indexOf()。
  • String.replace()。