Javascript 使用多个jQuery MiniColor样例更改多个div容器的背景色

我正在尝试使用rails jquery MiniColor来更改div容器的颜色。每个容器都是一个具有背景色属性的框。我的方法似乎不是我想要的。我使用的是rails版本的MiniColor，但我仍然需要通过js函数调用MiniColor。不管怎么说，样例都可以正常工作，但无论我做什么，盒子都不会改变颜色。如何使用每个样例直接更改目标div容器的颜色

JSFIDLE

宝石

JS

_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链的类的元素。每个输入的父div（所有输入的父div都相同）是包装表单标记的

将您的回拨更改为：

    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);

---

我不确定，但我可以建议您使用浏览器的检查器在

if/else if/else…

之前添加一个断点，并检查每个jquery选择器是否正在选择所需的内容，是否具有所需的类，以及目标元素是否具有所需的背景色值。你会发现检查这个问题的。我猜是

var parent=$（self.closest（'div'）行错误，请使用“this”而不是“self”。我尝试进行更改，但控制台上没有显示任何内容。只有样例本身被激活。是否尝试在函数中添加断点来调试它？添加一行
调试器或手动设置断点，并检查所有内容是否与预期内容一致。您可以添加一个JSFIDLE来显示您的问题吗？没有显示。我将尝试使用JSFIDLE。我创建了一个JS FIDLE供您签出。
<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);