demo

Question

删除了大量的东西以使其更具可读性，它会引发错误：

$('[data-weight]').each(function() {

说它是空的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 
    1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="ctl00_mainHead">

        <script type="text/javascript" src="includes/jqueryv1.4.2.js"></script>

           <script type="text/javascript">
            jQuery(document).ready(function() {
                $('[data-weight]').each(function() {

                    var usingMetric = false;

                    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 + " lbs");
                    }
                });
            });
        </script>
     </head>

    <body>

    <form name="aspnetForm" method="post" action="viewProduct.aspx?ID=3&amp;action=added" id="aspnetForm">


        <div class="productDetail">
            <b>Product Details</b>
        </div>

        <strong data-weight="200">800 KG</strong>


</form>
    </body>
</html>

更新

这是我的问题：

Using Javascript to display weights

Answer 1

在HTML5之前，

data-weight不是有效属性。怎么样这样做，

html part，

<strong class="weight-800">800 KG</strong>

jQuery part，

jQuery(document).ready(function () {
    $('[class^="weight"]').each(function () {

        var usingMetric = false;

        var $this = $(this);
        var value = this.className.split('-')[1];
        if (usingMetric) {
            $this.text(value + " KG");
        }
        else {
            value = parseFloat(value) * 2.20462262; // Convert to imperial
            $this.text(value + " lbs");
        }
    });
});

demo

Answer 2

如果您正在使用jQuery的“无冲突”模式，问题可能是：

jQuery(document).ready(function() {
                                ^-- Consider adding $ here

...或者始终使用jQuery而不是$。

如果你没有使用jQuery no-conflict，我不明白为什么会出现问题。它在这里运行得很好：http://jsbin.com/odaxa3我所做的唯一编辑是从Google的CDN加载jQuery并使属性中的权重与显示匹配。

Answer 3

您可以打印所有单位，而不是转换单位，而只显示首选单位：

<strong><span class="metric">800 kg</span> <span class="units-separator">/</span> <span class="imperial">1763 lbs</span></strong>

现在，您可以通过使用类指标 / imperial 显示/隐藏元素来切换单位：

.units-separator { display: none }
/* for metric view */
.metric { }
.imperial { display: none }
/* for imperial view */
.metric { display: none }
.imperial { }

如果不支持CSS，则两个单位都显示为：

800 kg / 1763 lbs

Answer 4

我可以知道，'数据权重'是什么？它是控件ID吗？如果它是控制ID，那么你需要给出：

$('#data-weight').children().each(function() {...

或者

以下文章可能对您有所帮助：

jQuery attribute selectors: How to query for an attribute with a custom namespace

Jquery错误：$（“[data-weight]”）为空

4 个答案:

demo