0

私は.find()を使用して繰り返し要素を識別し、それぞれに異なる背景色を与えています。私が欲しいのは：

  1. 色の配列 (色配列) を手動で作成します (#EF4128、#BA1028、#2C4534 など)
  2. 「widget-title」クラスを持つすべての h3 を検索し、それらを配列 (要素配列) に入れます。
  3. 両方の配列を一致させて、各アイテムに異なる色を付けます。

ここにいる多くの人にとって、それは簡単な仕事のはずです。ただし、whileループなどに慣れていないため、次のことを行いました。これを短くて甘くする方法を誰か教えてください。

<script type="text/javascript">
jQuery(document).ready(function(){        
var item1 = jQuery('h3.widget-title')[0];
var item2 = jQuery('h3.widget-title')[1];
var item3 = jQuery('h3.widget-title')[2];
var item4 = jQuery('h3.widget-title')[3];
var item5 = jQuery('h3.widget-title')[4];
var item6 = jQuery('h3.widget-title')[5];
var item7 = jQuery('h3.widget-title')[6];

jQuery('aside').find( item1 ).css('background-color', '#5938A2');
jQuery('aside').find( item2 ).css('background-color', '#BE8A45');
jQuery('aside').find( item3 ).css('background-color', '#B6AE18');
jQuery('aside').find( item4 ).css('background-color', '#864D75');
jQuery('aside').find( item5 ).css('background-color', '#2C4534');
jQuery('aside').find( item6 ).css('background-color', '#BA1028');
jQuery('aside').find( item7 ).css('background-color', '#EF4128');
});
</script>
4

1 に答える 1

2

私はあなたのコードをそのように減らします

$(function(){        
    var colours = ['#5938A2', '#BE8A45', '#B6AE18', '#864D75', '#2C4534', 
                   '#BA1028', '#EF4128'];

    $('aside h3.widget-title').each(function(i) {
        $(this).css('background-color', colours[i] || "#000");
        /* if you have more elements than colours defined, use 
         * a default colour - e.g. #000
         */
    });
});

現在の要素のインデックスがeach()メソッド内に渡され、単純な配列検索に使用されます

これらすべての見出しが兄弟である場合、より多くの CSS と最新のブラウザーを含む別のソリューションを実現でき、そのようにいくつかの CSS ルールを定義できます。

h3.widget-title.changecolour { background-color: #5938A2; }
h3.widget-title.changecolour ~ h3.widget-title { background-color: #BE8A45; }
...
h3.widget-title.changecolour ~ ... ~ h3.widget-title { background-color: #EF4128; }

次に、最初の要素changecolourにクラスを追加するだけです。h3.widget-titleこれにより、他のすべての兄弟見出しの背景色が自動的に変更されます

于 2012-08-27T15:10:07.673 に答える