编辑以包含其他答案

Question

我正在尝试为下面示例中的javascript行分配这些css值（如下所示），但不知道如何使用。 valueB-class定位 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中表示您引用的是类，因此不需要在名称中附加-class。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

编辑以包含其他答案

为了使单个范围中包含的文本具有不同的字体大小，您需要以某种方式将其分开。在具体的例子中，我在相应的div中添加了第二个span，并调整了cacl_summary方法以获得预期的结果。

代码如下：我还更新了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) + '%');
       }
    }
 }

同一个javascript行中的两个不同的css类

1 个答案:

编辑以包含其他答案