使用Javascript显示权重 [英] Using Javascript to display weights

问题描述

我有一个javascript函数，如果他们希望权重是公制或英制的话，它会更改用户的使用偏好.

I have a javascript function that changes a user preference, if they want weights to be metric or in imperial.

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

On my page I print out the weight, IE:

This is some description:

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

Blah blah

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

I need to make it so that Javascript changes the weight measurement for all weights on the page, and am not sure the best way to tackle this. Can you create your own tags, or tag properties?

感谢您的任何建议，JQuery很好.

Thanks for any suggestions, JQuery is fine.

推荐答案

我建议使用strong而不是b，但以下内容对其中任何一个都适用.

I'd recommend using strong rather than b, but the below will work for either of them.

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

Edit: Better solution than using a class, with working example, below.

使用类标记权重，例如:

Tag the weights with a class, e.g.:

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

然后在您的JavaScript中，您可以像这样进行切换:

Then in your JavaScript, you can switch like so:

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

很明显，您可以将其压缩一些，以使其更加清晰明了.

Obviously you can condense that a bit, kept it verbose for clarity.

更好的解决方案:

使用原始权重(您存储在数据库中的权重)将元素标记为data-weight属性，例如:

Tag the elements with the original weight (the one you store in your database) as a data-weight attribute, e.g.:

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的启发回答汤姆的另一​​个问题).

Attributes in the form data-xyz will pass validation as of HTML5; prior to HTML5 they are technically invalid, but harmless. But if you prefer a version that doesn't use data-weight, you can do it with classes instead: http://jsbin.com/icure3/2 (inspired by Reigel's answer to Tom's other question).

如果在较慢的浏览器(我正在看您，Microsoft)上看到在公制和英制之间切换时出现延迟，则可以通过为jQuery的选择器引擎提供更多的上下文(不仅仅是"[数据权重]")来帮助其优化. jQuery的引擎几乎支持所有 CSS3 .例如，如果您始终仅使用data-weight属性的一种标记(例如strong标记)，则将选择器更改为"strong [data-weight]"，以便选择器引擎知道它只能针对一种进行优化特定标签名称.同样，如果所有这些内容都在某个容器内(例如，ID为"productList"的div)，则您可以帮助引擎执行更多操作("#productList strong [data-weight]")，以便它可以忽略任何内容在那个div之外.我在上面将其完全保留为一般性.但是，只有在页面足够大且复杂到足以看到性能问题的情况下，才可能需要打扰.

If you see a delay when switching between metric and imperial on slower browsers (I'm looking at you, Microsoft), you can help jQuery's selector engine optimize by giving it more context than just "[data-weight]". jQuery's engine supports nearly all of CSS3. For instance, if you always use the data-weight attribute only one one kind of tag (say, strong tags), change the selector to "strong[data-weight]" so the selector engine knows it can optimize for just one specific tag name. Similarly, if all of these are inside some container (e.g., a div with the ID "productList" for instance), you can help the engine out even more ("#productList strong[data-weight]") so it can ignore anything outside that div. I've kept it completely general above. But probably only bother if the page is big and complex enough that you see a performance issue.

最后的想法:要在禁用JavaScript的浏览器上大吃一惊，您还可以在title属性中同时包含和值，例如:

Final thought: To throw a bone to browsers with JavaScript disabled, you might include both values in a title attribute as well, e.g.:

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

...因此它显示为执行该操作的浏览器上的工具提示.我将其包含在上面的示例中.

...so it shows up as a tooltip on browsers that do that. I included that in the example above.

这篇关于使用Javascript显示权重的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！