如果文本等于某些文本

时间：2017-08-06 08:27:58

标签： javascript jquery html

我用一些单选按钮制作了两个表格。我用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>

3 个答案:

答案 0 :(得分：2)

您可以在document.ready中添加以下代码以获得绿色框：

$('input[name=radio]:checked').each(function() {
    $(this).next().addClass('greenBox');
});

如果有radio checked，则上面的代码会检查DOM准备就绪，如果有，则会添加相关的类greenBox。

以下是更新的代码：

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('input[name=radio]:checked').each(function() {
    if ($(this).next().text() === 'Expert')
      $(this).next().addClass('greenBox');
  });

  var radioBtn = $('form label span');
  radioBtn.click(function() {
    if ($(this).prev().find('input[type="radio"]:checked')) {
      if ($(this).text() === 'Expert') {
        $(this).addClass('greenBox');
      }
    }

  });
});
＆＃13; 
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);
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您可以使用与$(document)ready

中的点击事件处理程序相同的代码 

$(document).ready(function() {

    function checkButton(el){
          if ($(el).prev().find('input[type="radio"]:checked')) {
            if ($(el).text() === 'Expert') {
                $(el).addClass('greenBox');
            }
          }
    }
    var radioBtn = $('form label span');
    radioBtn.each(function(){
          checkButton(this)
    })
    radioBtn.click(function(){
       checkButton(this);            
    });
});
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>

答案 2 :(得分：0)

将每个单选按钮分配给一个类，例如rd-expert。

仅在.rd-expert选择器上，使用.greenBox伪造选择器设置:checked的样式，不需要特殊的jQuery。

相关问题
最新问题