Question

我有一个jQuery颜色选择器输入我希望有一个主输入，它将是其他子输入的父级，我希望父输入在我单击按钮时更改子输入值和背景颜色。我创建了一个函数，当有一个parrent输入值设置时，它会改变子输入的值，但是我无法弄清楚如何改变父输入相同颜色的子输入背景颜色。

我知道当我点击按钮时出现错误信息

时会出现一些错误

无法读取属性＆＃39; target＆＃39;未定义的

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

删除该模板代码或粘贴渲染结果。这可能是第一个问题。

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

}

目标是具有类.background-color-features的元素，在您的模板代码运行之前不存在，这可能是您获得Cannot read property 'target' of undefined的原因，您的模板代码是否正确呈现？让我们看看结果。

这是一个分叉的小提琴。 https://jsfiddle.net/7hjkuzjt/

点击时jQuery颜色选择器改变颜色

1 个答案: