如何使用jQuery向多个元素添加条件类？

Question

因此，我在这里总共是n00bie，所以请原谅我对此或任何礼节造成的任何错误/问题！

我希望在使用字段产量的表单上为无线电输入构建一些美观，易于触摸的按钮。 他们的想法是，它们一开始是灰度的，在进行悬停和选择时，它们会失去灰度并显示下面的颜色。

就像您确定的那样，我在这里找到的代码中四处乱窜，以尝试将其全部工作。 尽管以前没有使用过jQuery，但以下代码实际上也可以按照我的意愿运行。

我只需要查询到的。主动类适用于第二个元素（类.icon标签）

请在下面找到我正在使用的代码。

CSS

input[type='radio']:checked{
        positon:absolute;
     -webkit-filter: brightness(1.1) grayscale(0) opacity(1)!important;
       -moz-filter: brightness(1.1) grayscale(0) opacity(1)!important;
            filter: brightness(1.1) grayscale(0) opacity(1)!important;
    }

.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);

}
.drinkcard-cc:checked{
    -webkit-filter:grayscale(0);
       -moz-filter:grayscale(0);
            filter:grayscale(0);

} 

.drinkcard-cc{
    cursor:pointer;
    padding: 45px;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    background-position: center;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
     -webkit-filter: brightness(1.8) grayscale(1) opacity(.8);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.8);
            filter: brightness(1.8) grayscale(1) opacity(.8);
            border-radius: 10px;  

.active{
-webkit-filter: brightness(1.1) grayscale(0) opacity(1)!important;
       -moz-filter: brightness(1.1) grayscale(0) opacity(1)!important;
            filter: brightness(1.1) grayscale(0) opacity(1)!important;
            border: 1px solid #007bff;
}

jQuery的

$(document).ready(function(){
  makeActive();
  $("input[type='radio']").on("change",function(){
    makeActive();
  });
});
function makeActive(){
  $("input[type='radio']").each(function(){
      if($(this).prop("checked")){
        $(this).closest('.option').addClass("active");

      }else{
        $(this).closest('.option').removeClass("active");

      }
    });
}

HTML

<div class="form-group col-12 d-block mx-auto">                             
<h3> Are you Male or Female? </h3>
<div class="cc-selector grid-container">
{{#options}}
<div class="drinkcard-cc option">
        <label class="drinkcard-cc icon" id="{{value_id}}" for="{{field_id}}_{{value_id}}"/></label>
        <label class="label-text" for="{{field_id}}_{{value_id}}" data-db-localized-content="{{field_id}}_OPTION_{{value_id}}" ></label>
        <input 
            class="image-input drinkcard-cc"
            type="radio" 
            id="{{field_id}}_{{value_id}}"
            name="{{name}}" 
            value="{{value}}" />
</div>
    {{/options}}
</div>
</div>

所以，目前的查询增加了。主动类与类#option元素-我也想申请这#icon

我尝试将其重写为父级/子级，并且它失去了选中的单选按钮的功能，并将该类应用于每个div元素（压缩）

var parent ='div'
var child = 'label'

function makeActive(){
$("input[type='radio']").each(function(){
if($(this).prop("checked")){
$(parent).addClass("active");
$(parent +child).addClass("active");
$(parent +child +child).addClass("active");

}else{
$(parent).removeClass("active");
$(parent +child).removeClass("active");
$(parent +child +child).removeClass("active");

我尝试添加：

$("#ICON").addClass("active") or .removeClass 

到“如果/其他”部分的相关部分； 但是，这似乎不起作用。

我敢肯定，解决方案真的很简单，这么长时间我都感到困惑！

Answer 1

像这样吗？

function makeActive(){
   $("input[type='radio']").each(function(){
      var div = $(this).closest('.option');
      if($(this).prop("checked")){
         div.addClass("active").find('.icon').addClass("active");             
      }else{
         div.removeClass("active").find('.icon').removeClass("active");
      }

  }
});

Answer 2

您太接近了，您只需要使用类符号.icon而不是ID符号#icon 。

尝试使用：

$(".icon").addClass("active") 

Answer 3

谢谢大家的评论-

最简单的答案是创建额外的CSS类：

.drinkcard-cc.active .icon { /* beautiful formatting here */ }

谢谢04FS！

我将在适当的时候尝试JS响应-谢谢大家！