同一条javascript行中的两个不同的CSS类

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/

Answer 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) + '%');
       }
    }
 }