Two different css classes in the same javascript line

Question

I'm trying to assign these css values (below) for the javascript line in the example below, but don't know a way to target valueB with the .valueB-class.

$(".valueA").html(valueA + " valueB" + ((valueA > 1) ? 's': ''));

.valueA-class { font-size:X }
.valueB-class { font-size:XX }

Here is an example of what I need help with (you may have to click on the input boxes in the results panel to get the calculations to show up - that's what I had to do): http://jsfiddle.net/hughett/g21g8t85/

Welcome to Stack Overflow! It's a little difficult to understand what you're trying to do here. Can you explain further? — thumbtackthief
– thumbtackthief, Commented Mar 19, 2015 at 20:13
Also: jsfiddle.net is a much-used tool around here to make a mock-up of your code, which might help you better illustrate where you're having trouble. — thumbtackthief
– thumbtackthief, Commented Mar 19, 2015 at 20:17
Posting some more code would be helpful. Your current example is a rather tricky to follow/understand, IMHO mostly due to the way you've named things. — David Tansey
– David Tansey, Commented Mar 19, 2015 at 20:23
We need an explanation using actual words more than anything. Code explanations only work if you know most of the code to begin with. — user1106925
– user1106925, Commented Mar 19, 2015 at 20:24
Thanks everyone for the welcome and the help. Being my first time on here, I'm learning how best to post here. Sorry for the being vague. I'll try to put this together on jsfiddle.net to help explain more. Thank you again. — Hughett
– Hughett, Commented Mar 21, 2015 at 16:49

nmargaritis · Accepted Answer · 2015-03-23 10:36:46Z

1

Welcome to stackoverflow!

Your question seems a bit vague. I assume that this is you want to achieve. In the specific example the value of the class is changed through the use of the jquery attr function. Firstly, the specific div in which our text is placed is retrieved and then the value gets specified. I am attaching a code snippet below.

A general note, using a . in css indicates that you are referring to a class so there is no need to attach a -class in the name.

$( "#myButton" ).on( "click", function() {
    var attr = $("#myText").attr('class');
    console.log(attr);
    if (attr == "valueA") {
        $("#myText").attr("class","valueB");
    } else {
        $("#myText").attr("class","valueA");    
    }
  
});

.valueA { font-size:11pt }
.valueB { font-size:25pt }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myButton" type="button">Change Text size</button>
<div id="myText" class="valueA">sdsa asd aasdaas asdjlasj dasdkas asldjsalj slad TEST</div>

EDIT to include another answer

In order for the text included in a single span to have different font-size you need to separate it somehow. In the specific example, I have added a second span in the respective div and adjusted the cacl_summary method to get the expected result.

The code is available below; I have also updated the jsfiddle here

<div style="background:yellow;"><span class="label">Simple payback</span>
<span class="figure sp"></span> <span class="figure year"></span></div>

function calc_summary(){
    if (cspy) {
       sp = parseFloat($("input[name=upgrade]").val()) / cspy;
       if (sp) {
          sp = (sp < 100) ? sp.toString().substring(0, 4) : sp;
          $(".sp").html(sp);
          $(".year").html(" years" + ((sp > 1) ? 's': ''));
          $(".ror").html(parseInt((1/sp) * 100) + '%');
       }
    }
 }

edited Mar 23, 2015 at 10:36

answered Mar 19, 2015 at 20:41

nmargaritis

8797 silver badges22 bronze badges

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

6 Comments

Hughett Over a year ago

Thank you Nikos. I've added more details of what I'm after above. I hope this helps. And thank you for the welcome.

nmargaritis Over a year ago

No probl, so you are trying to make the "Simple payback" take the .year class? Please explain the goal in plain english in 1-2 sentences :)

Hughett Over a year ago

The results of the calculations in the example are "Simple payback 1.18 years" - I want to have two different font sizes. One font size for "1.18" and one font size for "years."

nmargaritis Over a year ago

@Hughett I have updated the answer as well as the jsfiddle. If it answers your question, please mark it as correct so as for the thread to close.

Hughett Over a year ago

Thank you so very much. You are so helpful. I can't thank you enough. I clicked the check mark to green. Is that all that's required to close it out? Or is there something else I should do? Thanks again.

|

Collectives™ on Stack Overflow

Two different css classes in the same javascript line

1 Answer 1

EDIT to include another answer

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDIT to include another answer

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related