Question

如果用户在_result_fields.html.erb中检查:good，我们如何更改:result_value＆amp;索引中绿色的:date_value字体颜色？

这是为了给用户提供量化的:results加时赛的视觉参考。

例如：

Averaged
Meditated (min)
1.4 Dec 2014
1.8 Jan 2015***
2.1 Feb 2015***
1.8 Mar 2015
  *** represents green font color. The User would have checked :good for these results in the form to make them green in the index.

结果是量化的嵌套属性。

class Result < ActiveRecord::Base
	belongs_to :user
  belongs_to :quantified
  default_scope { order('date_value DESC') }
	scope :good, -> { where(good: true) }
	scope :bad, -> { where(good: false) }
end

_result_fields.html.erb

<div class="nested-fields">
  <div class="form-group">
    <%= f.text_field :result_value, class: 'form-control', placeholder: 'Enter Result' %>
    <br/>
		<%= f.date_select :date_value, :order => [:month, :day, :year], :with_css_classes => true, :class => "modular-date-field" %>
    <b><%= link_to_remove_association "Remove Result", f %></b>
  <div class="america3">
  <label> Good: </label>
  <%= f.check_box :good %>
  </div>
  </div>
</div>

量化控制器

class QuantifiedsController < ApplicationController
  before_action :set_quantified, only: [:show, :edit, :update, :destroy]
  before_action :logged_in_user, only: [:create, :destroy]

  def index
    if params[:tag]
      @quantifieds = Quantified.tagged_with(params[:tag])
    else
      @quantifieds = Quantified.joins(:results).all
      @averaged_quantifieds = current_user.quantifieds.averaged
      @instance_quantifieds = current_user.quantifieds.instance
    end
  end

quantifieds / index.html.erb

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '1540372976229929',
      xfbml      : true,
      version    : 'v2.2'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

<!-- Default bootstrap panel contents -->

<div id="valuations" class="panel panel-default">
  
  <div class="panel-heading"><h4><b>AVERAGE</b></h4></div>

  <% @averaged_quantifieds.each do |averaged| %>
    <div class="attempt">

        <b><%= raw averaged.tag_list.map { |t| link_to t.titleize, tagquantifieds_path(t) }.join(', ') %> 

        <%= link_to edit_quantified_path(averaged) do %>
        (<%= averaged.metric %>)</b>
        <% end %>
        <div class="red">
        <ul>
          <% averaged.results.each do |result| %>
            <li>
              <b><%= result.result_value %></b>&nbsp;&nbsp;
              <%= result.date_value.strftime("%b %Y") %>
            </li>
          <% end %>
        </ul>
        </div>
      </div>
  <% end %>
</div>

  <div class="valuations-button">
  <%= link_to new_quantified_path, class: 'btn'  do %>
  <b><span class="glyphicon glyphicon-plus"</span></b>
  <% end %>
  </div>

  <div
    class="fb-like"
    data-share="true"
    data-width="450"
    data-show-faces="true">
  </div>

<br>

<!-- Default bootstrap panel contents -->
<div id="valuations" class="panel panel-default">
  
  <div class="panel-heading"><h4><b>INSTANCE</b></h4></div>

  <% @instance_quantifieds.each do |instance| %>
    <div class="attempt"> 
      <b><%= raw instance.tag_list.map { |t| link_to t.titleize, tagquantifieds_path(t) }.join(', ') %>
      <%= link_to edit_quantified_path(instance) do %>
        (<%= instance.metric %>)</b>
      <% end %>
      <div class="red">
      <ul>
        <% instance.results.each do |result| %>
        <li>
          <%= result.date_value.strftime("%b.%d.%y") %>
           &nbsp;&nbsp;
          <%= result.result_value %>
        </li>
        <% end %>
      </ul>
      </div>
    </div>
  <% end %>
</div>

  <div class="valuations-button">
  <%= link_to new_quantified_path, class: 'btn'  do %>
  <b><span class="glyphicon glyphicon-plus"</span></b>
  <% end %>
  </div>

非常感谢你的时间！

Answer 1

你可以使用checked：

input[type=checkbox]:checked + label {
  color: red;
}

<强> Live Demo

复选框选中后，您可以设置所需的任何规则

当然要确保你没有尝试选择父元素，没有办法选择只有CSS的父元素

如果选中复选框如何更改索引中的字体颜色？

1 个答案: