Textfarbe ändern onclick

Ich habe eine Umschalttaste und wenn ich auf die Schaltfläche Ich möchte in der Lage sein, die Farben des Textes von einer helleren Farbe zu ändern, wenn nicht ausgewählt, um schwarz, wenn ausgewählt. Im Moment funktioniert es nur auf einer der Tasten. Attached ist eine Geige meines Codes. https://jsfiddle.net/h2db7qLp/Textfarbe ändern onclick

function onContainerClick(event) { 
 
    if (event.classList.contains('off')) { 
 
    event.classList.remove('off'); 
 
    } else { 
 
    event.classList.add('off'); 
 
    } 
 
}

.container { 
 
    background: #EFEFEF; 
 
    position: relative; 
 
    width: 126px; 
 
    height: 40px; 
 
    cursor: pointer; 
 
    border: 1px solid rgba(0, 0, 0, 0.2); 
 
    border-top: #CCC solid 1px; 
 
    border-radius: 2px 0 0 2px; 
 
    border-bottom: #EEE solid 1px; 
 
    border-right: #ddd solid 1px; 
 
    border-left: #ddd solid 1px; 
 
    border-radius: 2px 0 0 2px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 
.container2 { 
 
    background: #EFEFEF; 
 
    position: relative; 
 
    width: 226px; 
 
    height: 40px; 
 
    cursor: pointer; 
 
    border: 1px solid rgba(0, 0, 0, 0.2); 
 
    border-top: #CCC solid 1px; 
 
    border-radius: 2px 0 0 2px; 
 
    border-bottom: #EEE solid 1px; 
 
    border-right: #ddd solid 1px; 
 
    border-left: #ddd solid 1px; 
 
    border-radius: 2px 0 0 2px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 
.switch { 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 100%; 
 
    background-color: #fff; 
 
    transition: all 0.15s ease; 
 
    left: 0; 
 
    z-index: 1; 
 
} 
 
.switch-title { 
 
    margin-bottom: 6px; 
 
    font-size: 16px; 
 
} 
 
.container.off {} .container.off .switch, 
 
.container2.off .switch { 
 
    left: 50%; 
 
    background-color: #fff; 
 
} 
 
.container2.off .left-long, 
 
.container.off .left-short, 
 
.container2.on .right-long, 
 
.container.on .right-short { 
 
    color: #aaa; 
 
} 
 
.label { 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 100%; 
 
    text-align: center; 
 
    padding-top: 11px; 
 
    z-index: 1; 
 
    font: 16px"adiHaus", Arial, sans-serif; 
 
    font-weight: bolder; 
 
    color: #000; 
 
} 
 
.label.right-long { 
 
    left: 50%; 
 
} 
 
.label.right-short { 
 
    left: 50%; 
 
}

<div class="switch-title">Hand:</div> 
 
<div class="container" id="container" onclick="onContainerClick(this)"> 
 
    <div class="switch" id="switch"> 
 
    </div> 
 
    <div class="label left-short" onclick="onContainerClick(this)">L</div> 
 
    <div class="label right-short" onclick="onContainerClick(this)">R</div> 
 
</div>

Quelle

2016-05-24 sizemattic

ich hinzugefügt, um die Javascript – sizemattic

Bitte werfen Sie einen Blick auf diese [Antwort] (http://stackoverflow.com/a/14273784/2565294) – Nora

Warum Sie Event-Handler auf die haben Sie L und R divs sowie der Container? – j08691

Ich denke, dass es gut geht, indem Sie die Klasse ‚auf‘ auf Änderung, können Sie Ihre Handler auch nicht auf jedem div rufen müssen, nur einmal anrufen.

function onContainerClick(event) { 
 
    if (event.classList.contains('off')) { 
 
    event.classList.remove('off'); 
 
    event.classList.add('on'); 
 
    } else { 
 
    event.classList.add('off'); 
 
    event.classList.remove('on'); 
 
    } 
 
}

.container { 
 
    background: #EFEFEF; 
 
    position: relative; 
 
    width: 126px; 
 
    height: 40px; 
 
    cursor: pointer; 
 
    border: 1px solid rgba(0, 0, 0, 0.2); 
 
    border-top: #CCC solid 1px; 
 
    border-radius: 2px 0 0 2px; 
 
    border-bottom: #EEE solid 1px; 
 
    border-right: #ddd solid 1px; 
 
    border-left: #ddd solid 1px; 
 
    border-radius: 2px 0 0 2px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
}  
 

 
.container2 { 
 
    background: #EFEFEF; 
 
    position: relative; 
 
    width: 226px; 
 
    height: 40px; 
 
    cursor: pointer; 
 
    border: 1px solid rgba(0, 0, 0, 0.2); 
 
    border-top: #CCC solid 1px; 
 
    border-radius: 2px 0 0 2px; 
 
    border-bottom: #EEE solid 1px; 
 
    border-right: #ddd solid 1px; 
 
    border-left: #ddd solid 1px; 
 
    border-radius: 2px 0 0 2px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
}  
 

 
.switch { 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 100%; 
 
    background-color: #fff; 
 
    transition: all 0.15s ease; 
 
    left: 0; 
 
    z-index: 1; 
 
}  
 

 
.switch-title { 
 
    margin-bottom: 6px; 
 
    font-size: 16px; 
 
}  
 

 
.container.off {}  
 

 
.container.off .switch, 
 
.container2.off .switch { 
 
    left: 50%; 
 
    background-color: #fff; 
 
}  
 

 
.container2.off .left-long, 
 
.container.off .left-short, 
 
.container2.on .right-long, 
 
.container.on .right-short { 
 
    color: #aaa; 
 
}  
 

 
.label { 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 100%; 
 
    text-align: center; 
 
    padding-top: 11px; 
 
    z-index: 1; 
 
    font: 16px "adiHaus", Arial, sans-serif; 
 
    font-weight: bolder; 
 
    color: #000; 
 
}  
 

 
.label.right-long { 
 
    left: 50%; 
 
}  
 

 
.label.right-short { 
 
    left: 50%; 
 
}

<div class="switch-title">Hand:</div> 
 
<div class="container on" id="container" onclick="onContainerClick(this)"> 
 
    <div class="switch" id="switch"> 
 
    </div> 
 
    <div class="label left-short">L</div> 
 
    <div class="label right-short">R</div> 
 
</div>

Quelle

2016-05-24 19:57:40

Alter, du bist ein Lebensretter! Vielen Dank!!! – sizemattic

Antwort

Verwandte Themen