使用Javascript显示权重

Question

我有一个改变用户偏好的javascript函数,如果他们想要权重是公制的还是英制的.

在我的页面上我打印出重量,IE:

This is some description:

This product weights <b>200 KG</b>

Blah blah

我需要这样做,以便Javascript更改页面上所有权重的权重测量,并且我不确定解决此问题的最佳方法.您可以创建自己的标签或标签属性吗？

感谢任何建议,JQuery很好.

Answer 1

我推荐使用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将通过HTML5的验证 ; 在HTML5之前,它们在技术上无效,但无害.但如果您更喜欢不使用的版本,data-weight可以使用类来代替:http://jsbin.com/icure3/2(灵感来自Reigel对Tom的其他问题的回答).

如果你看到在较慢的浏览器上切换公制和英制时的延迟(我正在看你,微软),你可以通过给它更多的上下文而不仅仅是"[data-weight]"来帮助jQuery的选择器引擎进行优化.jQuery的引擎几乎支持所有CSS3.例如,如果您始终data-weight只使用一种标签属性(例如,strong标签),将选择器更改为"strong [data-weight]",以便选择器引擎知道它可以优化一个特定的标签名称.类似地,如果所有这些都在某个容器内(例如,ID为"productList"的div),您可以更多地帮助引擎("#productList strong [data-weight]"),这样它就可以忽略任何东西在那个div之外.我把它完全保持在上面.但是,如果页面足够大且足够复杂,您可能会感到麻烦,以至于您会发现性能问题.

最后的想法:要在禁用JavaScript的情况下向浏览器抛出骨骼,您可以在属性中同时包含这两个值title,例如:

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

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