0

我有一个包含 20 个复选框的列表，允许用户（Wordpress 仪表板）选择网站其他地方使用的颜色。我想要在每个直观地显示颜色的复选框之前进行一点预览。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>&nbsp;</div>");


});
4

1 回答 1

0

首先-您的价值观：双引号内有单引号"'#FEB601'"。去掉单引号得到"#FEB601".

现在这段代码可以工作了：（http://jsfiddle.net/GXuU5/1/）

jQuery(document).ready(function($){

    // first I create divs

    $("#acf-highcharts_kleuren_multiple.field ul.checkbox_list li label").prepend("<div>&nbsp;</div>");

    // now I can change colors of created divs

    $(function() {

        $("#acf-highcharts_kleuren_multiple.field ul.checkbox_list li label input").each(function() {
            color = $(this).val();

            $(this).prev().css("background-color", color );
        });

    });


});
于 2013-05-28T13:43:33.547 回答