Изменить цвет фона нескольких контейнеров div с несколькими образцами jQuery-minicolors

Question

Я пытаюсь использовать rails jquery minicolors, чтобы изменить цвет контейнеров div. Каждый контейнер представляет собой ящик с атрибутом background-color. Кажется, мой подход не работает так, как я хочу. Я использую raic-версию minicolors, но мне все равно приходится вызывать minicolors через функцию js. Так или иначе, образцы работают без проблем, но коробки не изменят цвет, независимо от того, что я делаю. Как я могу использовать каждый образец для непосредственного изменения цвета целевых контейнеров Div?

jsfiddle

https://jsfiddle.net/41zomar7/

камень

# Gemfile
gem 'jquery-minicolors-rails'

JS

var self = this;
$('#profile_color_attributes_border_background_color, #profile_color_attributes_body_background_color, #profile_color_attributes_header_label_background_color, #profile_color_attributes_information_box_color, #profile_color_attributes_about_me_background_box_color, #profile_color_attributes_browser_fill_color').minicolors({
    theme: 'bootstrap',
    animationSpeed: 50,
    animationEasing: 'swing',
    change: function (hex, opacity) {
        var color = $(this).minicolors('rgbaString');
        var parent = $(self).closest('div');
        if (parent.hasClass("profile-border-bg-color")) {
            $("preview-border").css("background-color", color);
        } else if (parent.hasClass("profile-body-bg-color")) {
            $("preview-container").css("background-color", color);
        } else if (parent.hasClass("profile-header-label-bg-color")) {
            $("preview-header-block").css("background-color", color);
        } else if (parent.hasClass("profile-info-color")) {
            $("preview-info-block").css("background-color", color);
        } else if (parent.hasClass("profile-about-me-color")) {
            $("preview-container-about-me").css("background-color", color);
        }
    }
});

_form.html.erb

<div class="col-md-3">
  <%= f.simple_fields_for :profile_color do |c| %>
    <label>Browser Fill Color</label>
    <%= c.input :browser_fill_color, as: :minicolors, class: 'form-control browser-fill-color', label: false %>
    <label>Avatar Background Color</label>
    <%= c.input :border_background_color, as: :minicolors, class: 'form-control profile-border-bg-color', label: false %>
    <label>Body Background Color</label>
    <%= c.input :body_background_color, as: :minicolors, class: 'form-control profile-body-bg-color', label: false %>
    <label>Header Label Background Color</label>
    <%= c.input :header_label_background_color, as: :minicolors, class: 'form-control profile-header-label-bg-color', label: false %>
    <label>Information Box Color</label>
    <%= c.input :information_box_color, as: :minicolors, class: 'form-control profile-info-color', label: false %>
    <label>About Me Background Color</label>
    <%= c.input :about_me_background_box_color, as: :minicolors, class: 'form-control profile-about-me-color', label: false %>
  <% end %>
</div>

<div class="col-md-4">
<div class="preview-container">
<div class=”browser-fill”>
    <div class="preview-header">
      <h6>Profile Color Preview</h6>
    </div>
    <div class="preview-border">
      <div class="preview-container-avatar">

      </div>
    </div>
    <div class="preview-container-about-me">

    </div>
    <div class="preview-header-block">

    </div>
    <div class="preview-info-block">

    </div>
   </div>
  </div>
</div>

Answer 1

Ваше parent назначение неверно. Фактический элемент ввода - это тот, с классами которого вы тестируете цепочку if / else. Родительский элемент div для каждого ввода (и то же самое для всех них) заключается в том, что <div class="col-md-3"> упаковывает тег формы.

Измените свой обратный вызов на:

    var color = $(this).minicolors('rgbaString');
    if ($(this).hasClass("profile-border-bg-color")) {
        $("preview-border").css("background-color", color);
    } else if ($(this).hasClass("profile-body-bg-color")) {
        $("preview-container").css("background-color", color);
    } else if ($(this).hasClass("profile-header-label-bg-color")) {
        $("preview-header-block").css("background-color", color);
    } else if ($(this).hasClass("profile-info-color")) {
        $("preview-info-block").css("background-color", color);
    } else if ($(this).hasClass("profile-about-me-color")) {
        $("preview-container-about-me").css("background-color", color);
    }

и все готово.

---

В качестве рекомендации я бы порекомендовал вам использовать атрибуты данных вместо пользовательских странных имен классов для того, что вы делаете, если только вы не используете эти CSS-классы для стилизации. Что-то вроде:

<label>Avatar Background Color</label>
<%= c.input :border_background_color, as: :minicolors, class: 'form-control', data: {target: 'preview-border'}, label: false %>
<label>Body Background Color</label>
<%= c.input :body_background_color, as: :minicolors, class: 'form-control', data: {target: 'preview-container'}, label: false %>
# ...etc... not the data-target attribute has the class name of the preview div

и тогда вы действительно можете упростить свой обратный вызов до чего-то вроде:

var color = $(this).minicolors('rgbaString');
var trgt = $(this).data('target');
$('#'+trgt).css('background-color', color);