使用javascript显示权重

我建议使用 strong 而不是 b 但下面的内容适用于其中任何一个。

编辑 :比使用下面的工作示例的类更好的解决方案。

用一个类别标记重量,例如:

This product weighs <strong class='weight'>200 KG</strong>

然后在您的javascript中,您可以这样切换:

$('.weight').each(function() {
    var $this = $(this);
    var original = $this.text();
    var converted = /* ...convert the weight here... */;
    $this.text(converted);
});

很明显,你可以把它浓缩一点,为了清晰起见,请保持冗长。

更好的解决方案:

将原始权重(存储在数据库中的权重)标记为 data-weight 属性,例如:

This product weighs <strong data-weight='200'>200 KG</strong>

然后从该值转换:

$('[data-weight]').each(function() {
    var $this = $(this);
    var value = $this.attr("data-weight");
    if (usingMetric) {
        $this.text(value + " KG");
    }
    else {
        value = parseFloat(value) * 2.20462262; // Convert to imperial
        $this.text(value.toFixed(2) + " lbs");
    }
});

工作示例: http://jsbin.com/icure3

表单中的属性 data-xyz 会通过的 validation 从HTML5开始;在HTML5之前,它们在技术上是无效的,但无害。但是如果你喜欢不使用的版本 数据权重 ,您可以改为使用类: http://jsbin.com/icure3/2 (灵感来自 Reigel's answer 汤姆的另一个问题)。

如果在速度较慢的浏览器上在公制和英制之间切换时看到延迟(我看你,微软),你可以通过给jquery的选择器引擎提供更多的上下文而不仅仅是“[数据权重]”来帮助它优化。jquery的引擎几乎支持 CSS3 . 例如,如果您总是使用 数据权重 只将一种标记(例如, 坚强的 标记),将选择器更改为“strong[数据权重]”,这样选择器引擎就知道它可以只针对一个特定的标记名进行优化。类似地,如果所有这些都在某个容器中(例如,ID为“productList”的DIV),您可以帮助引擎更进一步(“productList strong[数据权重]”),以便它可以忽略该DIV之外的任何内容。我在上面将其完全保留为常规内容。但可能只有当页面足够大和复杂以至于您看到性能问题时才会麻烦。

最后一个想法是:要在禁用javascript的情况下向浏览器抛出骨骼,可以包括 二者都 A中的值 title 属性,例如:

This product weighs <strong title='200 KG / 441 lbs' data-weight='200'>200 KG</strong>

…所以它在浏览器上显示为工具提示。我在上面的例子中包括了这个。

我想加个班 .weight 用这个来瞄准所有的重量。

$('.weight').each(function(){...})

如果你想改变 innerHTML 您可以使用 html() 方法直接

$('.weight').html(function(idx, oldhtml){
 // you can use the oldhtml to extract info and create the new text here..
  $(this).html( ../*you new html here*/.. ); // replace existing with new html ..
})

HTML:

<b class="weight">200 KG</b>

javascript:

$("#UnitChangeButton").click(function() {
  $('.weight').each(function(){
    txt = $(this).text();
    newTxt = convert(txt);
    $(this).text(newTxt);
  });
});

您需要实现转换函数。您可以将状态(公制或英制)存储在一个javascript变量中。