ユーザー (Wordpress ダッシュボードの) がサイトの他の場所で使用されている色を選択できるようにする 20 個のチェックボックスのリストがあります。色を視覚的に示す各チェックボックスの前に少しプレビューが必要です。HTMLに関しては、これがどのように見えるかです。これは Wordpress ダッシュボードで生成されるため、jQuery を使用して変更することはできますが、ほとんど制御できません。
<div id="acf-highcharts_kleuren_multiple" class="field">
<ul class="checkbox_list checkbox">
<li><label><input type="checkbox" value="'#FEB601'" name="fields[field_51826b4cf2fa2][]" class="checkbox" id="acf-field-highcharts_kleuren_multiple">Yellow</label></li>
<li><label><input type="checkbox" value="'#FF9326'" name="fields[field_51826b4cf2fa2][]" class="checkbox" id="acf-field-highcharts_kleuren_multiple">Orange</label></li>
<li><label><input type="checkbox" value="'#EA312C'" name="fields[field_51826b4cf2fa2][]" class="checkbox" id="acf-field-highcharts_kleuren_multiple">Red</label></li>
<li><label><input type="checkbox" value="'#A21A55'" name="fields[field_51826b4cf2fa2][]" class="checkbox" id="acf-field-highcharts_kleuren_multiple">Purple</label><li>
</ul>
</div>
jQuery を使用して div 要素の色を変更しようとしています。入力フィールドから色の値を取得し、その値をその div の背景色として出力したいと考えています。アラートを介してすべての値を取得できます。以下のコードは、最初の div の色を最初の入力の値に変更します。すべての div を正しい入力フィールドに対応する別の色に変更するにはどうすればよいですか?
ここにフィドルがあります：http://jsfiddle.net/LKhS5/
jQuery(document).ready(function($){
$(function() {
$("#acf-highcharts_kleuren_multiple.field ul.checkbox_list li label input").each(function() {
alert($(this).val());
$("#acf-highcharts_kleuren_multiple.field ul.checkbox_list li label div").each(function() {
$(this).css("background-color", $("#acf-highcharts_kleuren_multiple.field ul.checkbox_list li label input").val() );
});
});
});
$("#acf-highcharts_kleuren_multiple.field ul.checkbox_list li label").prepend("<div> </div>");
});