オンザフライでcssの枠線の半径を変更する

Question

私は作成したウェブサイトビルダーを持っていますが、私はdivを使って人々に使うことができます。私は、彼らが半径を変更することができるようにして、それはリアルタイムで画面上に表示されます。

フォントファミリ、色、フォントサイズなどのように他のものが機能しています。それらはすべて素晴らしいです。しかし、半径を0以外に変更することはできません。何かから0に変わります。しかし、20pxや30pxなどと変わることはありません。

ここにコードがあります。

.button { 
    border-radius: <?php echo $r['btnradius'];?>px; 
    -moz-border-radius: <?php echo $r['btnradius'];?>px; 
    -webkit-border-radius: <?php echo $r['btnradius'];?>px; 
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 1.0); 
    -moz-box-shadow: 4px 4px 6px rgba(0, 0, 0, 1.0); 
    -webkit-box-shadow: 4px 4px 6px rgba(0, 0, 0, 1.0); 
    color: #<?php if($r['btntcolor']!='')echo $r['btntcolor'];else echo"FFFFFF";?>; 
    border-style: solid; 
    border-width: 2px; 
    border-color: #000000; 
    text-decoration: none; 
    background: #<?php if($r['btncolor']!='')echo $r['btncolor'];else echo"00dd10";?>; 
    display:inline-block; 
    font-size: <?php if($r['btntsize']!='')echo $r['btntsize'];else echo"22";?>px; 
    padding: 5px 15px 5px 15px; 
    max-width: 95%; 
} 

半径サイズの選択：

<SELECT id="btnradius" name="btnradius" class="form-control" 
style="width:90px; font-size:10px;"> 
<option value="<?php echo $r['btnradius']?>"> <?php echo $r['btnradius']? </option> 
<option value="0">0</option> 
<option value="10">10</option> 
<option value="20">20</option> 
<option value="30">30</option> 
<option value="40">40</option> 
<option value="50">50</option> 
<option value="60">60</option> 
</select> 

コード、それはその場で変更する必要があること：

<div class="button blank4 color_change tcolor_change tsize_change 
btnradius" style="border-radius: <?php echo $r['btnradius'];?>px; -moz- 
border-radius: <?php echo $r['btnradius'];?>px; -webkit-border-radius: <? 
php echo $r['btnradius'];?>px;" id="btncolor"><?php echo $r['subtext4']?> 
</div> 

を開始する

オリジナルCSSに上記のコードをオンザフライで変更するスクリプト：

$('#btnradius').on('change', function (e) { 
var optionSelected = $("option:selected", this); 
var valueSelected = this.value; 
$(".btnradius").css("border-radius", valueSelected); 
$(".btnradius").css("-moz-border-radius", valueSelected); 
$(".btnradius").css("-webkit-border-radius", valueSelected); 
}); 

Answer 1

あなたのCSSプロパティにpxサフィックスを逃している：

$(".btnradius").css("border-radius", valueSelected + "px"); 

Fiddle

Answer 2

私はあなたが述べたように、この問題は実際にあると信じています。

しかし、私はそれが0に何かから変更されます。しかし、それは20ピクセルまたは30pxなどを言うために変更されることはありません0を除いて半径を変更することができません。..

今すぐあなたのJavaScript

$('#btnradius').on('change', function(e) { 
    var optionSelected = $("option:selected", this); 
    var valueSelected = this.value; //<-- here is the problem 
    $(".btnradius").css("border-radius", valueSelected); 
}); 

がダウンボックスあなたのドロップで選択しoptionからの値になりますthis.valueをよく注意してくださいと言います。今度は値の最後からすべての値にpxがありません。

これは2つの方法で変更できます。

1. 変更optionタグのvalueが#.px（すなわち60px）なるように
2. 0作品が0であることを理由は、単位指定子を必要としないvar valueSelected = this.value + 'px';

を読むためvalueSelectedオプションを変更します。しかし、他のすべての値（すなわち、px、em、%など）