同一條javascript行中的兩個不同的CSS類

Question

我正在嘗試在下面的示例中為javascript行分配這些css值（如下），但不知道使用來定位valueB的方法。 valueB級 。

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

---

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

---

這是我需要幫助的示例（您可能必須在結果面板中單擊輸入框才能顯示計算結果-這就是我要做的事情）： http : //jsfiddle.net/hughett/ g21g8t85 /

Answer 1

歡迎來到stackoverflow！

您的問題似乎有點含糊。 我假設這是您想要實現的。 在特定示例中，通過使用jquery attr函數來更改類的值。 首先，檢索放置文本的特定div，然后指定值。 我在下面附上代碼片段。

使用的一般注釋。 css中的in表示您正在引用一個類，因此無需在名稱中附加-class。

 $( "#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> 

編輯以包括其他答案

為了使單個跨度中包含的文本具有不同的字體大小，您需要以某種方式將其分開。 在特定示例中，我在相應的div中添加了第二個跨度，並調整了cacl_summary方法以獲得預期的結果。

該代碼可在下面找到； 我也在這里更新了jsfiddle

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