Ändern Sie die Rahmenfarbe der Div basierend auf der Auswahl

Ich versuche eine JavaScript-Funktion zu erstellen, die es uns ermöglicht, die Rahmenfarbe eines Div basierend auf unserer Auswahl zu ändern. Wenn der Benutzer Div 1 und Gray 1 auswählt, ändert sich die Umrandungsfarbe von Div 1 zu color:#333333;, nachdem er Make Change getroffen hat.Ändern Sie die Rahmenfarbe der Div basierend auf der Auswahl

ist die HTML und CSS in Frage:

HTML:

<div id="div_6"> 
Div Selector: 
<!-- Place Div Select Here --> 
<select> 
<option>Div 1</option> 
<option>Div 2</option> 
<option>Div 3</option> 
</select> 
<br /><br /> 
Color Selector: 
<!-- Place Color Select Here --> 
<select> 
<option>Gray 1</option> 
<option>Gray 2</option> 
<option>Gray 3</option> 
</select> 
<!-- Place "Change Color" Button Here --> 
<button>Change Color</button> 
</div>

CSS:

/*color selectors*/ 
    #Gray1 { 
    color:#333333; 
    } 
    #Gray2 { 
    color:#777777; 
    } 
    #Gray3 { 
    color:#CCCCCC; 
    }

So wird die Funktion diese IDs zugreifen müssen. Bitte beachten Sie die gesamten Code/Webseite hier:

http://blog.drawyourpets.com/

Ich bin verloren, wohin man auch starten, wenn diese Funktion zu schaffen. Muss ich den Optionen verschiedene Klassen im HTML zuweisen? Vielen Dank!

EDIT Natürlich ist das Skript im <script> Abschnitt des <head> gehen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="description" content="This is a simple CSS, HTML, and JS Test"/> 
<title>WebToMed Website Developer Test</title> 
<style> 
/* Add all CSS enteries here */ 
    #div_1 { 
    background: red; 
    display: table-cell; 
    text-align: left; 
    width: 300px; 
    height: 50px; 
    } 
    #div_2 { 
    background: green; 
    display: table-cell; 
    text-align: center; 
    height: 50px; 
    } 
    #div_3 { 
    background: blue; 
    display: table-cell; 
    text-align: right; 
    width: 350px; 
    color: #ffffff; 
    font-weight: bold; 
    text-decoration: underline; 
    height: 50px; 
    } 
    #div_4 { 
    background: yellow; 
    display: flex; 
    text-align: center; 

    height: 300px; 
    } 
    #div_5 { 
    margin-top: auto; 
    margin-bottom: auto; 
    margin-right: auto; 
    margin-left: auto; 
    } 
    #div_6 { 
    border: 3px solid black; 
    margin-top: 10px; 
    padding: 20px;   
    } 
    .container { 
    display: table; 
    width: 100%; 
    } 
    /*color selectors*/ 
    #Gray1 { 
    color:#333333; 
    } 
    #Gray2 { 
    color:#777777; 
    } 
    #Gray3 { 
    color:#CCCCCC; 
    } 
    </style> 
<script> 
/* Add any JavaScript here */ 
</script> 
</head> 
<body>

Quelle

2017-06-09 HappyHands31

https://jsfiddle.net/yt2u8z3w/ Hier ist eine funktionierende Geige für Sie;) –

@ mr.void Warum hast du das nicht als Antwort eingefügt? –

Mein Englisch ist zu schlecht, um die Lösung zu erklären :( –

1.) Werte zuweisen Ihre options, weisen IDs zu Ihrem selects in Ihrem HTML:

<div id="div_6"> 
Div Selector: 
<!-- Place Div Select Here --> 
<select id="div"> 
<option value="div1">Div 1</option> 
<option value="div2">Div 2</option> 
<option value="div3">Div 3</option> 
</select> 
<br /><br /> 
Color Selector: 
<!-- Place Color Select Here --> 
<select id="colors"> 
<option value="gray1">Gray 1</option> 
<option value="gray2">Gray 2</option> 
<option value="gray3">Gray 3</option> 
</select>

2.) Erstellen Sie Ihre JavaScript-Funktion in Ihrem <script></script> Tags . Erklären Sie Ihre Variablen:

<script> 
/* Add any JavaScript here */ 

function changecolor(){ 
/*gets selected value within select with ID "div"*/ 
var selectedvalue = document.getElementById("div").value; 
/*gets selected value within select with ID "colors"*/ 
var selectedcolor = document.getElementById("colors").value;

3.) Erstellen If, Else If Aussagen Stile Grenze basierend auf Auswahl zu erklären:

if(selectedvalue == "div1" && selectedcolor == "gray1"){ 
     document.getElementById("div_1").style.borderColor="#333333"; 
     document.getElementById("div_1").style.borderWidth ="3px"; 
     document.getElementById("div_1").style.borderStyle ="solid"; 
} 
else if(selectedvalue == "div2" && selectedcolor == "gray1"){ 
     document.getElementById("div_2").style.borderColor="#333333"; 
     document.getElementById("div_2").style.borderWidth ="3px"; 
     document.getElementById("div_2").style.borderStyle ="solid"; 
} 
else if(selectedvalue == "div3" && selectedcolor == "gray1"){ 
     document.getElementById("div_3").style.borderColor="#333333"; 
     document.getElementById("div_3").style.borderWidth ="3px"; 
     document.getElementById("div_3").style.borderStyle ="solid"; 
} 
else if(selectedvalue == "div1" && selectedcolor == "gray2"){ 
     document.getElementById("div_1").style.borderColor="#777777"; 
     document.getElementById("div_1").style.borderWidth ="3px"; 
     document.getElementById("div_1").style.borderStyle ="solid"; 
} 
else if(selectedvalue == "div2" && selectedcolor == "gray2"){ 
     document.getElementById("div_2").style.borderColor="#777777"; 
     document.getElementById("div_2").style.borderWidth ="3px"; 
     document.getElementById("div_2").style.borderStyle ="solid"; 
} 
else if(selectedvalue == "div3" && selectedcolor == "gray2"){ 
     document.getElementById("div_3").style.borderColor="#777777"; 
     document.getElementById("div_3").style.borderWidth ="3px"; 
     document.getElementById("div_3").style.borderStyle ="solid"; 
} 
else if(selectedvalue == "div1" && selectedcolor == "gray3"){ 
     document.getElementById("div_1").style.borderColor="#CCCCCC"; 
     document.getElementById("div_1").style.borderWidth ="3px"; 
     document.getElementById("div_1").style.borderStyle ="solid"; 
} 
else if(selectedvalue == "div2" && selectedcolor == "gray3"){ 
     document.getElementById("div_2").style.borderColor="#CCCCCC"; 
     document.getElementById("div_2").style.borderWidth ="3px"; 
     document.getElementById("div_2").style.borderStyle ="solid"; 
} 
else if(selectedvalue == "div3" && selectedcolor == "gray3"){ 
     document.getElementById("div_3").style.borderColor="#CCCCCC"; 
     document.getElementById("div_3").style.borderWidth ="3px"; 
     document.getElementById("div_3").style.borderStyle ="solid"; 
} 
}; 

</script>

gibt es keine Notwendigkeit, die Stile für Ihre IDs mit CSS zu erklären. Sie können die Zeilen nach /*color selectors*/ innerhalb Ihrer <style></style> Tags entfernen. Wir machen "Inline-Stile" mit JavaScript, wenn wir dies tun: .style.borderColor="#333333";. JavaScript-Stile ähneln übrigens normalerweise CSS-Stilen, erscheinen aber in camelCase. Also font-weight in CSS = fontWeight in JavaScript.

Quelle

2017-06-09 19:18:44 HappyHands31

function change() { 
 
    $('#' + $('#select-div').val()).css('border', '3px solid ' + $('#select-color').val()); 
 
}

#div_1 { 
 
    background: red; 
 
    display: table-cell; 
 
    text-align: left; 
 
    width: 300px; 
 
    height: 50px; 
 
} 
 

 
#div_2 { 
 
    background: green; 
 
    display: table-cell; 
 
    text-align: center; 
 
    height: 50px; 
 
} 
 

 
#div_3 { 
 
    background: blue; 
 
    display: table-cell; 
 
    text-align: right; 
 
    width: 350px; 
 
    color: #ffffff; 
 
    font-weight: bold; 
 
    text-decoration: underline; 
 
    height: 50px; 
 
} 
 

 
#div_4 { 
 
    background: yellow; 
 
    display: flex; 
 
    text-align: center; 
 
    height: 300px; 
 
} 
 

 
#div_5 { 
 
    margin-top: auto; 
 
    margin-bottom: auto; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
#div_6 { 
 
    border: 3px solid black; 
 
    margin-top: 10px; 
 
    padding: 20px; 
 
} 
 

 
.container { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 

 
/*color selectors*/ 
 

 
#Gray1 { 
 
    color: #333333; 
 
} 
 

 
#Gray2 { 
 
    color: #777777; 
 
} 
 

 
#Gray3 { 
 
    color: #CCCCCC; 
 
} 
 

 
.output { 
 
    margin-top: 20px; 
 
} 
 
.output > div { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 50px; 
 
    margin: 10px; 
 
    border: 3px solid #000; 
 
    padding: 20px; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div_6"> 
 
    Div Selector: 
 
    <select id="select-div"> 
 
    <option value="div1">Div 1</option> 
 
    <option value="div2">Div 2</option> 
 
    <option value="div3">Div 3</option> 
 
    </select> 
 
    <br /><br /> Color Selector: 
 
    <select id="select-color"> 
 
    <option value="#777">Gray #555</option> 
 
    <option value="#999">Gray #999</option> 
 
    <option value="#AAA">Gray #BBB</option> 
 
    </select> 
 
    <button onClick="change();">Change Color</button> 
 
    
 
    <div class="output"> 
 
    <div id="div1">div 1</div> 
 
    <div id="div2">div 2</div> 
 
    <div id="div3">div 3</div> 
 
    </div> 
 
</div>

Quelle

2017-06-09 14:08:06

Just Paste Code ist keine gute Antwort ... –

Hahaha, oh ja ist es! :) –

Okay, ich werde versuchen zu erklären.

Zuerst sollten Sie eine Funktion definieren, die als Eventhandler für ein Ereignis fungiert. Es gibt mehrere Ereignisse, die von DOM-Elementen wie button, divs usw. ausgelöst werden.

Für Ihren Fall möchten wir auf das Klickereignis der Schaltfläche achten. (Wenn ein Benutzer auf die Schaltfläche klickt, erhalten eine Methode ausgeführt)

Wenn Sie mit jQuery arbeiten können diese easly getan:

$('.submit').on('click',() => { 

})

Hinweis: ive hinzugefügt, um eine „Eintragen“ -Klasse zu Ihrem Markup:

<button class="submit">Change Color</button>

Im nächsten Schritt wollen wir die Werte, die der Benutzer über die Auswahl ausgewählt hat. Mit jQuery kann dies wie so getan:

var idOfDiv = $('.divSelect option:selected').val(); 
var selectedGrayClass = $('.colorSelect option:selected').val();

Hinweis:

<select class="divSelect"> 
<option value="div1">Div 1</option> 
<option value="div2">Div 2</option> 
<option value="div3">Div 3</option> 
</select> 
<br /><br /> 
Color Selector: 
<!-- Place Color Select Here --> 
<select class="colorSelect"> 
<option value="gray1">Gray 1</option> 
<option value="gray2">Gray 2</option> 
<option value="gray3">Gray 3</option> 
</select>

Hinweis: ive eine "divSelect" und "Colorselect" -Klassen zu Ihrem Markup fügten die bei der Auswahl Color definierten Werte sollten Bezugnahme auf einige CSS-Klassen:

.gray1 {border:1px solid gray} 
.gray2 {border:1px solid #222} 
.gray3 {border:1px solid #ccc}

Am letzten Schritt wir die Daten verwenden wir aus unserer Auswahl gelesen haben:

$('#'+idOfDiv).removeClass().addClass(selectedGrayClass);

Hinweis: removeClass dient zum Entfernen einer Klasse, die zuvor hinzugefügt wurde.

Komplettlösung: https://jsfiddle.net/yt2u8z3w/

Quelle

2017-06-09 14:16:02

Bitte überprüfen Sie meine aktualisierte Website - Ich habe Ihre Änderungen hinzugefügt, aber immer noch nicht Erhalten Sie das gewünschte Ergebnis: http://blog.drawyourpets.com/ – HappyHands31

Sie müssen den Code in der Funktion document.ready wie in meinem Geige Beispiel umwickeln. document.ready wird aufgerufen, wenn Ihr Browser das DOM vollständig gerendert hat. An dieser Stelle können Sie DOM mit jQuery ändern. –

Bitte überprüfen Sie meine Seite erneut - der Code ist wie in Ihrem Geigenbeispiel eingebunden. – HappyHands31

Ändern Sie die Rahmenfarbe der Div basierend auf der Auswahl

Antwort

Verwandte Themen