How can I add a conditional class to multiple elements using jQuery?

Question

So I am a total n00bie here, so please excuse any errors/issues I have made with this or any etiquette faux pas!

I am looking to build some nice, easy to touch buttons for radio inputs on a form that is using field yields. The idea being they are greyscaled at first and upon hover & selection, they lose the greyscale and reveal the colour beneath.

As I am sure you can see, I have hacked around at code I have found on here to try and get this to all work. Despite not having worked with jQuery before, the below code actually functions as I want to too.

I just need the query to apply the .active class to a second element (the label with the class .icon )

Please find below the code I am using.

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>

So currently the query adds the .active class to the element with the class #option - I would also like to apply this to #icon

I have tried re-writing this as parent/child and it loses the functionality of the checked radio button and applies the class to every div element (condensed)

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");

I have tried adding:

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

to the relevant parts of the "if/else" parts; However, this does not seem to work.

I am certain the solution is really simple, I am just frazzled from looking at this for so long!

Why - just to apply formatting to .icon? That doesn’t need the class added to that element, you already added it to its ancestor, so you can use the descendant selector in CSS to format it based on that. .drinkcard-cc.active .icon { /* beautiful formatting here */ } — 04FS
– 04FS, Commented Sep 18, 2019 at 9:56
Perfect... I was using :active but .active works a treat! Thank you! — Mb18
– Mb18, Commented Sep 18, 2019 at 10:01

Svela · Accepted Answer · 2019-09-18 10:04:05Z

1

Something like this?:

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");
      }

  }
});

answered Sep 18, 2019 at 10:04

Svela

6395 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AElMehdi · Accepted Answer · 2019-09-18 10:17:10Z

1

You were too close you had just to use the class notation .icon instead of the id notation #icon.

Try using:

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

answered Sep 18, 2019 at 10:17

AElMehdi

6025 silver badges12 bronze badges

Comments

Mb18 · Accepted Answer · 2019-09-20 11:57:28Z

0

Thank you to all for their comments -

The simplest answer was to create the extra css class:

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

Thank you to 04FS for this!

I will in due course try the JS responses - Thanks all!

answered Sep 20, 2019 at 11:57

Mb18

358 bronze badges

Collectives™ on Stack Overflow

How can I add a conditional class to multiple elements using jQuery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related