Question

希望我能说清楚，因为我非常喜欢JavaScript和JQuery新手。话虽如此，我已经设法让自己非常接近我想要的地方。

除了我面临的一个问题。这是我的HTML设置。

<a class="button">Press Button</a>
    <ul>
        <li class="item">
            <label>Item - </label>
            <span class="metric">3.50</span>
        </li>
        <li class="item">
            <label>Item - </label>
            <span class="metric">2.75</span>
        </li>
        <li class="item">
            <label>Item - </label>
            <span class="metric">4.27</span>
        </li>
    </ul>

现在按下按钮时我想要实现的是将每个跨度中找到的所有度量值传递到数组中，将它们乘以2.2得到一组英制值，最后追加新创建的值值在每个度量范围下方的范围内。

以下示例

<li class="item">
<label>Item - </label>
<span class="metric">3.50</span>
<span class="imperial">7.70</span>
</li>

我遇到的问题是将我新创建的值（存储在名为“imperial”的数组中）追加到我的标记中。我能做的最好的是将完整数组附加到每个列表项中。

我想要发生的是每个新创建的英制值，附加在它的相应度量值之下。两者都在他们自己的span标签中。

我已将完整的JS包含在下面 -

$(document).ready(function() {

//CHANGE UNITS WHEN BUTTON IS CLICKED
$('a.button').click(function(){                 
    $('span.metric').toggle();
    $('span.imperial').toggle();
});

//CREATE VARS
//
var metric = [];
var imperial = [];

var products = [];
$("li").each(function(){ 
    products.push($(this));
});

//GET ALL METRIC UNITS IN ONE ARRAY
//
$("span.metric").each(function() {
    metric.push($(this).html());
});
console.log('metric units = ' + metric);

//MULTIPLY EACH METRIC BY 2.2 TO GET IMPERIAL. PUSH TO ARRAY
//
$.each(metric, function(key, value) {
    imperial.push((value)*2.2);
});
console.log('imperial units = ' + imperial);

//PASS IMPERIAL VALUES TO APPENDED SPAN
//
imperial = $.map(imperial, function(n, i){
    $.each(products, function(){
        $(this).append("<span class='imperial'>"+n+"</span>");
    });
    console.log(n);
});

//ROUND UP TO TWO DECIMAL PLACES
//
$("li.item span").each(function(){
    $(this).html(parseFloat($(this).html()).toFixed(2));
});

//HIDE ALL METRIC UNITS
//
$("span.imperial").addClass("hidden");

//APPEND UNITS
//
$("span.metric").append(" per Kg");
$("span.imperial").append(" per Lb");

}）;

除非我的代码中有任何其他错误，否则要关注的部分来自评论 -

//通过附加值的空间值

Answer 1

您可以以更简单的方式执行此操作，而无需构建额外的数组等。

$('.metric').each(function() {
    $('<span />') // create a new span element
        .addClass('imperial')
        .addClass('hidden')
        .html(this.innerHTML * 2.2).toFixed(2) + " per Lb")
        .insertAfter(this);

    $(this).html(function(i, oldHtml) {
        return parseFloat(oldHtml).toFixed(2) + " per Kg";
    });
});

Answer 2

我不确定你是否真的需要让它复杂化。这是如何做你想要完成的事情的一个非常基本的例子。

http://jsfiddle.net/bAHbS/3/

$('.button').click(function(){
    $('.item').each(function(){
        var items = $(this).find('span');
        if (items.length==1){ //Check to make sure we have't already appended
            var value = parseFloat($(this).find('span').html());
            $(this).append("<span class='imperial'>"+(value * 2.2).toFixed(2)+"</span>");
        }
    });
});

JQuery - 按顺序追加数组值

2 个答案: