通過表單編輯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

一種選擇將是一個onClick選項添加到每個按鈕調用你的函數：

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

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

只需沖洗，並與其他三個輸入重複。

另一種選擇是，你可以給每個按鈕的ID，並通過添加一個。點擊（函數（）...）的處理程序爲每個按鈕做類似於你做了什麼的單選按鈕的東西。