フォームからのCSS編集 - ライブプレビュー

Question

バックグラウンドカラー（入力経由）とボーダーの重み（入力経由）を編集するオプションを追加するにはどうすればよいですか？私のスクリプトを見てください。

私はJSの専門家ではありません。JSFiddleに例を挙げてください。その様子から、

$('.divSpecific input').click(function(){ 
 
    
 
    if($(this).attr("alt") == "1") 
 
     $('div.signUp').css("background","red") 
 
      .css("color","black"); 
 
      
 
    else if ($(this).attr("alt") == "2") 
 
     $('div.signUp').css("background","yellow") 
 
      .css("color","black"); 
 
    else 
 
     $('div.signUp').css("background","cyan") 
 
      .css("color","white"); 
 
    });

div.divSpecific { 
 
    height: 20px; 
 
} 
 
.signUp{ 
 
    border:solid 1px; 
 
    height:20px; 
 
    width:100px; 
 
    text-align:center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div>First step - choose button</div> 
 
<div class="divSpecific">Design - ver.1<input type="radio" alt="1" name="name" /></div> 
 
<div class="divSpecific">Design - ver.2<input type="radio" alt="2" name="name" /></div> 
 
<div class="divSpecific">Design - ver.3<input type="radio" alt="3" name="name" /></div> 
 

 
<br> 
 
    
 
<div>Or change manually background, text abd border (HEX format)</div> 
 
<div>Background color<input type="text"><input type="submit" value="Confirm"> 
 
<div>Text color<input type="text"><input type="submit" value="Confirm"></div> 
 
<div>Border color <input type="text"><input type="submit" value="Confirm"></div> 
 

 
<br> 
 

 
<div>And change border weight</div> 
 
<div>Border weight (default 1 px)<input type="text"><input type="submit" value="Confirm"> 
 

 
<br><br> 
 

 
<div class="signUp">Sign Up</div>

Answer 1

CSSスタイルの適用を処理し、ラジオ入力にいくつかのデータ属性を追加し、それらを使用してテキスト領域にデフォルト値を設定する関数を作成します。

$('[type="radio"]').click(function() { 
 
    $("#border_color").val($(this).attr("data-border-color")), 
 
    $("#border_width").val($(this).attr("data-border-width")), 
 
    $("#bg_color").val($(this).attr("data-bg-color")), 
 
    $("#text_color").val($(this).attr("data-color")), 
 
    applyStyles(); 
 
}) 
 

 
$('[type="submit"]').click(function() { 
 
    applyStyles(); 
 
}) 
 
    
 
function applyStyles() { 
 
    $('div.signUp').css({ 
 
     borderColor: $("#border_color").val(), 
 
     borderWidth: $("#border_width").val(), 
 
     backgroundColor: $("#bg_color").val(), 
 
     color: $("#text_color").val(), 
 
    }) 
 
}

div.divSpecific { 
 
    height: 20px; 
 
} 
 
.signUp{ 
 
    border:solid 1px; 
 
    height:20px; 
 
    width:100px; 
 
    text-align:center; 
 
}

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

 
<div>First step - choose button</div> 
 

 
<div class="divSpecific">Design - ver.1<input type="radio" data-bg-color="red" data-border-color="black" data-color="black" data-border-width="2" alt="1" name="name" /></div> 
 
<div class="divSpecific">Design - ver.2<input type="radio" data-bg-color="yellow" data-border-color="black" data-color="black" data-border-width="2" alt="2" name="name" /></div> 
 
<div class="divSpecific">Design - ver.3<input type="radio" data-bg-color="cyan" data-border-color="black" data-color="white" data-border-width="2" alt="3" name="name" /></div><br/> 
 
    
 
<div>Or change manually background, text abd border (HEX format)</div> 
 
<div>Background color<input id="bg_color" type="text"><input type="submit" value="Confirm"></div><!-- you were missing a close div here --> 
 
<div>Text color<input id="text_color" type="text"><input type="submit" value="Confirm"></div> 
 
<div>Border color <input id="border_color" type="text"><input type="submit" value="Confirm"></div><br> 
 

 
<div>And change border weight</div> 
 
<div>Border weight (defoult 1 px)<input id="border_width" type="text"><input type="submit" value="Confirm"></div><!-- ...and here --> 
 

 
<br><br> 
 

 
<div class="signUp">Sign Up</div>

Answer 2

、代わりにクリックの、多分あなたは、変更イベントを試してみたいですか？

Answer 3

1つのオプションは、あなたのための関数を呼び出すボタンのそれぞれにonClickのオプションを追加することです：

<input type="text" id="backgroundInput"><button onClick="updateBackground()">Confirm</button> 

function updateBackground() { 
    $('div.signUp').css('background-color', $('#backgroundInput'); 
} 

ただ、すすぎ、他の3つの入力を繰り返し。

もう一つの選択肢は、各ボタンにIDを与え、ラジオボタンの場合と同じように、各ボタンの.click（function（）...）ハンドラを追加することです。