使用多个 jQuery-minicolors 色板更改多个 div 容器的背景颜色

Posted 2023-05-09

【中文标题】使用多个 jQuery-minicolors 色板更改多个 div 容器的背景颜色

【英文标题】：Change background color of multiple div containers with multiple jQuery-minicolors swatches

【发布时间】：2019-04-08 07:40:27

【问题描述】：

我正在尝试使用 rails jquery minicolors 来更改 div 容器的颜色。每个容器都是一个带有背景颜色属性的盒子。我的方法似乎没有达到我想要的方式。我用的是rails版本的minicolors，但是还是要通过js函数调用minicolors。无论如何，样本可以毫无问题地工作，但无论我做什么，盒子都不会改变颜色。如何使用每个样本直接更改目标 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>

【问题讨论】：

我不确定，但我可以建议您使用浏览器的检查器在 if/else if/else... 之前添加一个断点，并检查每个 jquery 选择器是否选择了您想要的内容，具有您想要的类和目标元素具有您想要的背景颜色值。你会发现检查的问题。我猜var parent = $(self).closest('div');line 是错误的，使用“this”而不是“self”。

我尝试进行更改，但控制台上没有显示任何内容。只有样本本身被激活。

您是否尝试在函数中添加断点来调试它？添加一行debugger; 或手动设置断点并检查所有内容是否与您不同。你能添加一个 jsfiddle 来显示你的问题吗？

没有显示。我会尝试使用 JSfiddle。

我创建了一个 JS fiddle 供您结帐。 jsfiddle.net/41zomar7

【参考方案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);