1
いくつかのラジオボタンで2つのフォームが作成されました。私はcss :beforeセレクタでそれらを変更しました。ラジオボタンの代わりに素晴らしいフォントを使用しました。あなたがコードを見ることができるように、私はラジオボタンがチェックされ、そのテキストが 'エキスパート'ならば色を変えようとしています。私はクリックイベントとその作業でこれを行いました。しかし、私はこれがクリックした後ではなく、ページの読み込み時に発生します。テキストがテキストと等しい場合、チェックされた入力色が変更されます
任意の助け私は
$(document).ready(function() {
var radioBtn = $('form label span');
radioBtn.click(function(){
if ($(this).prev().find('input[type="radio"]:checked')) {
if ($(this).text() === 'Expert') {
$(this).addClass('greenBox');
}
}
});
});form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 0;
}
form label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
cursor: pointer;
margin-right: 10%;
margin-bottom: 0;
}
form label input {
display: none;
overflow: hidden;
}
form label input+span {
font-size: 12px;
}
form label input+span::before {
content: '\f096';
font-family: 'FontAwesome';
font-size: 52px;
font-style: normal;
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1.2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #aab3c3;
}
form label input:checked + span::before {
content: '\f14a';
color: #aab3c3;
-webkit-animation: check 0.3s ease-in-out;
animation: check 0.3s ease-in-out;
}
form label input:checked +span.greenBox::before {
color: #4cd20b;
}
@-webkit-keyframes check {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
70% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes check {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
70% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="yetkinlik-wrapper row-fluid">
<div class="row-fluid gozlem-title">
<div class="span2 empty"></div>
</div>
<div class="bag-kurma yetkinlik-guven row-fluid">
<form action="" class="yetkinlik span5">
<label>
<input type="radio" name="radio" checked><span>Expert</span>
</label>
<label>
<input type="radio" name="radio"><span>Intermediate</span>
</label>
<label>
<input type="radio" name="radio"><span>Beginner</span>
</label>
</form>
<form action="" class="guven span5">
<label>
<input type="radio" name="radio"><span>Expert</span>
</label>
<label>
<input type="radio" name="radio"><span>Intermediate</span>
</label>
<label>
<input type="radio" name="radio" checked><span>Beginner</span>
</label>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>感謝するでしょう。
感謝の内部で使用すると、クリックイベントハンドラで使用している同じコードを使用することができますが、私は確認されたテキストは、「エキスパート」である場合にのみ必要。それぞれではありません。今すぐ初心者の色はあなたのコードで緑色です – erenesto
Ok。私は 'Expert'のためだけに更新しました –
ありがとう – erenesto