CSS über Formular bearbeiten - Live-Vorschau

Question

Wie kann ich die Option hinzufügen, um die Hintergrundfarbe (über Eingabe) und das Gewicht der Grenze (über Eingabe) zu bearbeiten. Bitte schau dir mein Skript an.

Ich bin kein Experte für JS, bitte geben Sie ein Beispiel für 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

Erstellen Sie eine Funktion, mit der die CSS-Stile angewendet werden und fügen Sie den Radioeingaben einige Datenattribute hinzu und verwenden Sie diese, um Standardwerte in Ihren Textbereichen festzulegen.

$('[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

Von den Blicken von ihm, statt klicken, vielleicht wollen Sie das Änderungsereignis versuchen?

Answer 3

Eine Möglichkeit wäre, eine onClick Option zu jeder der Tasten hinzuzufügen, die eine Funktion für Sie ruft:

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

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

Gerade mit den anderen drei Eingänge spülen und wiederholen .

Eine weitere Option ist, dass Sie jeder der Schaltflächen eine ID geben und etwas Ähnliches wie für die Optionsfelder tun können, indem Sie für jede Schaltfläche einen .click (function() ...) - Handler hinzufügen.