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);
                });
            }
        });
    });

私が抱えている問題は、ドロップダウンオプションごとに1回だけループすることです。これは、現在、数回ループし、各色に複数のオンクリックを追加するためです。

4

1 に答える 1

2

#colour-palette各反復（ここでは3回の反復）でクリックハンドラーをにバインドしているため、複数のクリックが追加されます。

より良いアプローチは、要素を作成してデータプロパティとして色を追加し、onclickハンドラーを使用してto要素.colourのクリックイベントをTrythisに割り当てることです。#colour-palette.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/

于 2012-06-19T01:42:21.063 に答える