[英]jQuery color picker change color on click
I have a jQuery color picker inputs I want to have one main input that will be a parent to other children inputs and I want parent input to change children inputs value and background color when I click a button. 我有一个jQuery颜色选择器输入,我想要一个主输入将成为其他子输入的父输入,并且我希望父输入在单击按钮时更改子输入的值和背景颜色。 I created a function that change value of children inputs when there is a parrent input value set but I can't figure out how to change children input background color for same color that is parent input.
我创建了一个函数,该函数可以在设置了相应的输入值时更改子级输入的值,但是我不知道如何将子级输入的背景色更改为与父级输入相同的颜色。
I know that I have some errors becouse when I click on a button I have an error message 我知道我在单击按钮时遇到一些错误,因为我有一条错误消息
Cannot read property 'target' of undefined 无法读取未定义的属性“目标”
JS 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 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>
Get rid of that templating code or paste up what the rendered result is. 删除该模板代码或粘贴呈现的结果。 That is probably the first problem.
那可能是第一个问题。
function MainBackgroundColorChange(event) {
$(".background-color-features").css({
"background-color": $(event.target).css('background-color'),
"color": $(event.target).css('color')
});
} }
The target being elements with the class .background-color-features
, don't exist until your template code has run, which could be why you are getting Cannot read property 'target' of undefined
, is your templating code rendering properly? 目标是类
.background-color-features
元素,直到模板代码运行后才存在,这可能就是为什么您Cannot read property 'target' of undefined
,模板代码是否正确呈现? Lets see the result. 让我们看看结果。
Here is a fiddle to fork from. 这是一个小玩意儿。 https://jsfiddle.net/7hjkuzjt/
https://jsfiddle.net/7hjkuzjt/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.