Question

我有一个包含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>");


});

Answer 1

首先 - 您的值：双引号"'#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 );
        });

    });


});

获取多个输入的值，然后将每个输入输出到不同的元素

1 个答案: