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 を取得しているように見えますが、配列 colorname の最後の項目をすべてのアンカー タグに追加します。

4

3 に答える 3

0

いくつかの提案があります：

  1. 職務の分離 -- 一定の CSS と DOM スタイリングを組み合わせています。JavaScript からできることを移動します。

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

  2. 並列配列は常に悪い考えです。各インデックスのアイテムが一緒に属する配列が 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 をシンプルに保ちます。上記の 2 つの変更により、JS コードは次のように削減できます。

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

    コードは非常に簡潔で、その意図は非常に明確です。デモ

于 2013-08-26T18:42:05.997 に答える