addclass in jquery parameter to be a javascript variable

Question

I want to dynamically calculate the percentage value and pass the percentage value to add class prefixing 'p' to it. For every value of it i have a css class existing in my css file.

Please help find a way to do so.

    ac.sumPer=((ac.sum/5)*100);
    ac.test='p'+ac.sumPer;
    console.log(ac.test);

    $('#change').addClass("c100 big dark ac.test");

How to use javascript variables in jquery selectors, jQuery: using a variable as a selector — Tushar
– Tushar, Commented Jan 2, 2017 at 6:29
You can use addClass() multiple times i.e.$('#change').addClass("c100 big dark" ).addClass(ac.test); — Satpal
– Satpal, Commented Jan 2, 2017 at 6:35

Bharatsing Parmar · Accepted Answer · 2017-01-02 06:37:12Z

3

You can try bellow. If you pass variable in double quote then its value will not be replaced.

ac.sumPer=((ac.sum/5)*100);
ac.test='p'+ac.sumPer;
console.log(ac.test);

$('#change').addClass("c100 big dark "+ ac.test);

edited Jan 2, 2017 at 6:37

answered Jan 2, 2017 at 6:34

Bharatsing Parmar

2,4551 gold badge11 silver badges18 bronze badges

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

Comments

Manish · Accepted Answer · 2017-01-02 06:38:00Z

1

Here is how you can use addclass() with variable names. Below is also the image when you inspect using dev tools.

$(document).ready(function(){
var classname ="text";
	$('p').addClass("paragraph "+ classname);
})

.paragraph{
  font-weight:bold;
}
.text{
  color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>
Hello There
</p>

For you case the code should be:

ac.sumPer=((ac.sum/5)*100);
ac.test='p'+ac.sumPer;
console.log(ac.test);

$('#change').addClass("c100 big dark "+ac.test);

answered Jan 2, 2017 at 6:38

Manish

5,0963 gold badges33 silver badges47 bronze badges

Collectives™ on Stack Overflow

addclass in jquery parameter to be a javascript variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related