テキストの色を変更するonclick

Question

私はトグルボタンを持っています。ボタンをクリックすると、選択時に黒色に選択されていないと、テキストの色をより明るい色に変更できます。今はボタンの1つだけで作業しています。添付は私のコードの真実です。 https://jsfiddle.net/h2db7qLp/

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>

Answer 1

私は「on」にクラスを追加することにより、変化に、それはまた、あなたが一度だけ呼び出して、すべてのdivの上であなたのハンドラを呼び出す必要はありません、うまくいくと思います。

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>