0

JavaScript関数の動的呼び出しについて質問があります。これが私の問題です：

カラーピッカーを含むelement（div）があるとしましょう。この要素を動的に使用/複製したい（ユーザーが望む回数）。このカラーピッカーの呼び出しは次のようになります：コードはここで表示できます： http：//jsfiddle.net/CJhqc/1/ （ここでテストするためではなく、ここで混乱するため、フィドルに入れました）

ここで、idはたとえば。と呼ばれる変数ですmy_color。[]このカラーピッカーアイテムをもっと呼び出すことができるように、入力に追加しました。これは大丈夫です。この要素を5つ持つことができ、この各入力を読み取ることができます。問題はカラーピッカーの呼び出しにあります。colopickerには、次のid="color_picker"呼び出しがあります。

jQuery(document).ready(function(){
    jQuery('#color_picker').children('div').css('backgroundColor', '<?php echo $value; ?>');    
    jQuery('#color_picker').ColorPicker({
        color: '<?php echo $value; ?>',
        onShow: function (colpkr) {
            jQuery(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            jQuery(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {    
            jQuery('#color_picker').children('div').css('backgroundColor', '#'+ hex);
            jQuery('#color_picker').next('input').attr('value','#'+ hex);
        }
    });
});

問題：このアイテムが3つある場合、それらのJavaScriptは常に同じです。カラーピッカーの横の入力は「配列」-><?php echo $id; ?>[]ですが、このアイテムごとにカラーピッカーのJavaScriptを設定するにはどうすればよいですか。そして、与えることはできませんcolor_picker id -> color_picker[]。たとえば、2番目のアイテムの色を変更したい場合は、2番目のアイテムではなく、最初のアイテムの色が変更されます。それぞれが独自のJavaScriptを必要としていると思いますが、どのように呼び出すのですか？

前もって感謝します！！！

4

1 に答える 1

0

colorSelectorID の代わりにカラー ピッカーのクラスを使用し (既にフィドルにあるので、それを使用します) jQuery(this)、onChange ハンドラー内で参照して、適切な子と入力を操作します。私はそれがあなたが望むように働くべきだと思います。

jQuery(document).ready(function(){
    //init all color pickers to the same $value
    jQuery('.colorSelector').children('div').css('backgroundColor', '<?php echo $value; ?>');    
    //init ColorPicker handling for all color pickers
    jQuery('.colorSelector').ColorPicker({
        color: '<?php echo $value; ?>',
        onShow: function (colpkr) {
            jQuery(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            jQuery(colpkr).fadeOut(500);
            return false;
        },
        //handle onChange individually
        onChange: function (hsb, hex, rgb) {    
            jQuery(this).children('div').css('backgroundColor', '#'+ hex);
            jQuery(this).next('input').attr('value','#'+ hex);
        }
    });
});
于 2013-01-07T14:49:59.950 に答える