0

使用它来传递一个 rgb 值数组并创建锚标记

$.each(color, function(index, value){
    $('body').append($('<a class="color">').css({
        height: '30px',
        width: '30px',
        'background-color': value
    })
);
});

然后尝试使用此代码将 URL 数组传递到这些锚标记中

$.each(colorname, function(index, value){
    $('.color').each(function(){
        $(this).attr('href', value);
    });
});

样本数组：

var color = [];
color[ 0 ] = 'RGB(233,232,217)';
color[ 1 ] = 'RGB(227,222,202)';
color[ 2 ] = 'RGB(218,210,186)';
color[ 3 ] = 'RGB(208,189,150)';
color[ 4 ] = 'RGB(213,208,194)';


var colorname = [];
colorname[ 0 ] = '/url1/';
colorname[ 1 ] = '/url2/';
colorname[ 2 ] = '/url3/';
colorname[ 3 ] = '/url4/';
colorname[ 4 ] = '/url5/';

它似乎获取了所有 URL，但它将数组颜色名中的最后一项附加到所有锚标记。

4

3 回答 3

1

试试这个：- http://jsfiddle.net/aidioo7/L3qrq/

JS：-

var color = [];
color[ 0 ] = 'RGB(233,232,217)';
color[ 1 ] = 'RGB(227,222,202)';
color[ 2 ] = 'RGB(218,210,186)';
color[ 3 ] = 'RGB(208,189,150)';
color[ 4 ] = 'RGB(213,208,194)';


var colorname = [];
colorname[ 0 ] = '/url1/';
colorname[ 1 ] = '/url2/';
colorname[ 2 ] = '/url3/';
colorname[ 3 ] = '/url4/';
colorname[ 4 ] = '/url5/';

$.each(color, function (index, value) {
    var anchor=$('<a class="color">').css({
        height: '30px',
        width: '30px',
            'background-color': value
    }).attr("href",colorname[index]);
    $('body').append(anchor);
});
于 2013-08-26T16:11:22.663 回答
0

它的制作，因为你遍历你的颜色名称数组并将所有设置.color为相同的值。

试试这个

 $('.color').each(function(index){
        $(this).attr('href', colorname[index]);
    });
于 2013-08-26T16:09:48.543 回答
0

我有几个建议：

  1. 职责分离——您将一些不变的 CSS 与 DOM 样式混合在一起。我会把你能做的从 JavaScript 中移出：

    /* in a .css file somewhere... */
.color {
    display: block;
    width: 30px;
    height: 30px;
    float: left;
}

  2. 并行数组总是一个坏主意。如果您有两个或多个数组，其中每个索引处的项目属于一起，请改用 JS 对象数组，并使用有意义的属性名称：

    var colors = [
    {
        rgb: 'RGB(233,232,217)',
        url: '/url1/'
    },
    {
        rgb: 'RGB(227,222,202)',
        url: '/url2/'
    },
    {
        rgb: 'RGB(218,210,186)',
        url: '/url3/'
    },
    {
        rgb: 'RGB(208,189,150)',
        url: '/url4/'
    },
    {
        rgb: 'RGB(213,208,194)',
        url: '/url5/'
    },
];

  3. 保持你的 jQuery/JS 简单。通过以上两个修改，你的 JS 代码可以简化为：

    $.each(colors, function () {
     $('<a class="color">')
        .css('background-color', this.rgb)
        .attr("href", this.url)
        .appendTo('body');
});

    代码非常简洁，其意图现在非常清晰。演示

于 2013-08-26T18:42:05.997 回答