jQueryカラーピッカーがクリック時に色を変更する

Question

jQueryカラーピッカー入力があります。他の子入力の親となる1つのメイン入力がありたいと思います。子入力の値と背景色を変更するには、ボタン。私はパラレンタ入力値が設定されているときに子供の入力値を変更する関数を作成しましたが、親入力である同じ色の子供の入力背景色を変更する方法を理解することはできません。私はプロパティを読み取ることができません、私はボタンをクリックしたときに、私は、エラーメッセージ

を持っbecouse私は多少の誤差があることを知っている

未定義

の「ターゲット」JS

function MainBackgroundColorChange(event) { 
    $(".background-color-features").css({ 
     "background-color": $(event.target).css('background-color'), 
     "color": $(event.target).css('color') 
    }); 
} 

// Dla tła 
$('#background-color-main-button').on('click', function() { 
    $('.background-color-features').val($('#background-color-main').val()); 
    MainBackgroundColorChange(); 
}); 


$('.show-hide-color-section-background').on('click', function() { 
    if ($('.color-section-background').is(":visible")) { 
     $('.color-section-background').hide("slide"); 
     $('.show-hide-color-section-background').text('Pokaż więcej'); 
    } else { 
     $('.color-section-background').show("slide"); 
     $('.show-hide-color-section-background').text('Ukryj'); 
    } 
}); 

HTML/BLADE.PHP

<div class="row main-header"> 
      <div class="col-sm-9"> 
       <a href="#" class="page-header" style="color:black">Kolory tła głównych elementów</a> 
      </div> 
     </div> 
     <br> 
     <div class="form-group"> 
      <label for="background_color_for_all" class="col-sm-2 control-label">Ustaw kolor tła dla wszystkich 
       głównych elementów</label> 
      <div class="col-sm-6 color-pick"> 
       {{Form::text('background_color_for_all', null, array('id' => 'background-color-main', 'class' => 'form-control bpm-colorpicker'))}} 
      </div> 
     </div> 
     <div class="color-section-background" style="display: none"> 
      <div class="form-group"> 
       <label for="background_color_subpage_header" class="col-sm-2 control-label">Kolor tła w nagłówkach 
        podstron</label> 
       <div class="col-sm-6 color-pick"> 
        {{Form::text('background_color_subpage_header', null, array('class' => 'form-control bpm-colorpicker background-color-features'))}} 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="background_color_objects" class="col-sm-2 control-label">Kolor tła obiektów (np. listy 
        ofert, wyszukiwarki ofert, nawigacji 
        stron)</label> 
       <div class="col-sm-6"> 
        {{Form::text('background_color_objects', null, array('class' => 'form-control bpm-colorpicker background-color-features'))}} 
       </div> 
      </div> 


      <div class="form-group"> 
       <label for="background_color_header" class="col-sm-2 control-label">Kolor tła nagłówka</label> 
       <div class="col-sm-6"> 
        {{Form::text('background_color_header', null, array('class' => 'form-control bpm-colorpicker background-color-features'))}} 
       </div> 
      </div> 


      <div class="form-group"> 
       <label for="background_color_menu_footer" class="col-sm-2 control-label">Kolor tła dolnego 
        menu</label> 
       <div class="col-sm-6 color-pick"> 
        {{Form::text('background_color_menu_footer', null, array('class' => 'form-control bpm-colorpicker background-color-features'))}} 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="background_color_footer" class="col-sm-2 control-label">Kolor tła stopki</label> 
       <div class="col-sm-6"> 
        {{Form::text('background_color_footer', null, array('class' => 'form-control bpm-colorpicker background-color-features'))}} 
       </div> 
      </div> 
     </div> 
     <div class="form-group"> 
      <span class="col-sm-2"></span> 
      <div class="col-sm-6"> 
       <button type="button" id="background-color-main-button" class="btn btn-seccondary">Ustaw dla 
        wszystkich 
       </button> 
      </div> 
     </div> 
     <div class="form-group"> 
      <span class="col-sm-2"></span> 
      <div class="col-sm-6"> 
       <button type="button" class="btn btn-seccondary show-hide-color-section-background"> 
        Pokaż więcej 
       </button> 
      </div> 
     </div> 

Answer 1

テンプレートコードを削除するか、レンダリング結果を貼り付けてください。それはおそらく最初の問題です。あなたがCannot read property 'target' of undefinedを得ている理由かもしれない

function MainBackgroundColorChange(event) { 
$(".background-color-features").css({ 
    "background-color": $(event.target).css('background-color'), 
    "color": $(event.target).css('color') 
}); 

}あなたのテンプレートコードが実行されるまで

クラス.background-color-featuresを持つ要素であるターゲットを、存在していないが、あなたのテンプレートコードが正しくレンダリングされますか？結果を見ることができます。

ここからフォークするフィドルです。 https://jsfiddle.net/7hjkuzjt/