通过表单编辑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，并通过添加一个。点击（函数（）...）的处理程序为每个按钮做类似于你做了什么的单选按钮的东西。