Question

我正在尝试根据下拉框中指定的颜色创建一个颜色选择器，其代码如下（jsfiddle here）

HTML：

<select id="colour" name="colour"> 
      <option value="000000">Black</option>
      <option value="CCCCCC">Grey</option>
      <option value="EAEAEA">Light Grey</option>
</select>

JS：

    $(function() {
        var $colourcontainer = '<div id="colour-palette"></div>';
        $( '#colour' ).after( $colourcontainer );

        $( '#colour option' ).each( function() {
            $val = $(this).val();
            if( $val ) {
                $( '#colour-palette' ).append( '<div class="colour" style="background-color:#'+$val+';"></div>' ).click( function() {
                    $('#colour:last').val($val);
                    alert($val);
                });
            }
        });
    });

我遇到的问题是让它为每个下拉选项循环一次，因为它现在循环几次并为每种颜色添加多个onclicks。

Answer 1

它添加了多次点击，因为您在每次迭代中将点击处理程序绑定到#colour-palette（此处为3次迭代）。

更好的方法是创建.colour元素将颜色添加为数据属性，然后使用on click处理程序将#colour-palette的click事件分配给.color元素该试试这个：

$(function() {
    var $colourcontainer = '<div id="colour-palette"></div>';
    $('#colour').after($colourcontainer);

    $('#colour option').each(function() {
        $val = $(this).val();
        if ($val) {
            var colorEl = $('<div class="colour" style="background-color:#' + $val + ';"></div>');
            colorEl.data("bgColor", $val)
            $('#colour-palette').append(colorEl);
        }
    });
    $('#colour-palette').on("click", ".colour", function() {
        $('#colour').val($(this).data("bgColor"));
    });
});

工作JSFiddle： http://jsfiddle.net/Rf9L3/1/

单击另一个元素时从下拉框中选择选项

1 个答案: