Question

使用它来传递一组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，但它将数组colorname中的最后一项附加到所有锚标记。

Answer 1

试试这个： - http://jsfiddle.net/adiioo7/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);
});

Answer 2

它的制作，你通过你的colorname's数组并将所有.color设置为相同的值。

试试这个

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

Answer 3

我有一些建议：

职责分离 - 你将一些常量的CSS与DOM样式混合在一起。我会从JavaScript中移除你的东西：

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

并行数组总是一个坏主意。如果您有两个或多个数组，其中每个索引的项目都在一起，请使用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/'
    },
];

让您的jQuery / JS变得简单。通过以上两个修改，您的JS代码可以简化为：

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

代码非常简洁，其目的非常明确。 DEMO

我有一系列需要传递给锚标签的URL

3 个答案:

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