javascript - 我需要构建一个数组数组，在概念化时遇到问题

Question

我正在尝试为采用此数组的 Chart.js 收集值

data = [{ value:1, color:#123456 }]

HTML:

<table class="card">
    <tr class="section1">
        <td class="label">One</td>
        <td class="goal">1</td>
    </tr>
    <tr class="section2">
        <td class="label">Two</td>
        <td class="goal">2</td>
    </tr>
    <tr class="section3">
        <td class="label">Three</td>
        <td class="goal">3</td>
    </tr>
    <tr class="section4">
        <td class="label">Four</td>
        <td class="goal">4</td>
    </tr>
    <tr class="section5">
        <td class="label">Five</td>
        <td class="goal">5</td>
    </tr>
    <tr class="section6">
        <td class="label">Six</td>
        <td class="goal">6</td>
    </tr>
</table>

CSS:

table.card tr.section1 td.label{
    color: #c26558;
}
table.card tr.section2 td.label{
    color: #cdaf76;
}
table.card tr.section3 td.label{
    color: #6e9874;
}
table.card tr.section4 td.label{
    color: #809ead;
}
table.card tr.section5 td.label{
    color: #467082;
}
table.card tr.section6 td.label{
    color: #ac9578;
}

JavaScript:

var data = []; //{ value: 30, color:"#F38630" },
var goals = document.getElementsByTagName( $('table.card .goal').html() );
var quantities = jQuery.makeArray( goals );

for( var i=0; i<quantities.length; i++ ){
    var labelColor = '#000000';

    $('table.card .goal').each(function(){
        if( $(this).html() == quantities[i] ){
            labelColor = rgb2hex( $(this).closest('tr').find('.label').css('color') );
        }
    });

    data[i] = { 'value':quantities[i], 'color':labelColor };
}

这是我最近尝试制作一组​​数量的工作。我在 makeArray() 之前摆弄 jQuery.toArray()。我不知道，也许我的整个方法都不对。获取 css('color') 的 block 正在运行，我对此非常满意，但我很难将 .goal 单元格的值转换为数组。

这是 Chart.js 文档:http://www.chartjs.org/docs/

Answer 1

我认为你把它弄得比需要的复杂得多。只需选择 td.goal 元素，然后使用 .map() 将对象返回到包含当前目标值的新数组。

var result = $("table.card tr[class^=section] td.goal").map(function(i, tr) {
    var goal = $(this);
    return {
        value: parseInt(goal.text(), 10),
        color:goal.prev().css('color') || '#000000'
    };
}).toArray();