0

我正在尝试使用以下代码（此处为 jsfiddle）根据下拉框中指定的颜色创建颜色选择器

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。

4

1 回答 1

2

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

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

$(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/

于 2012-06-19T01:42:21.063 回答