javascript - 使用 jQuery 星形选择器的 Rails 表单

Question

我有一个用来创建推荐信的 rails 表格。目前我正在使用表单 number_field 来选择从 1 到 5 的星级。

我有一个想要在表单上使用的 jQuery 星选择器，但不确定在提交表单时如何将数据值保存为星级。有没有办法做到这一点？

形式

<h1>Comment as <%= current_user.first_name %> <%= current_user.last_name %></h1>
<div class="border border-grey-light rounded" style ="padding: 10px;">
  <%= image_tag current_user.avatar_thumbnail, class: "avatar", alt: "avatar" %>
  <%= form_with model: @testomonial do |f| %>
    <div class="mb-3">
      <%= f.label :review, class: "label" %>
      <%= f.text_field :body, class: "form-control", placeholder: "Write review in here" %>
    </div>
    <div class="mb-3">
      <%= f.label :stars, class: "label" %>
      <%= f.number_field :star, in: 1..5, class: "form-control" %>
    </div>
    <div class="mb-3">
      <%= f.submit class: "btn btn-primary text-base py-1.5 px-5", value: "Post testomonial" %>
    </div>
  <% end %>
</div>

星级选择器

<div class='rating-stars text-center'>
  <ul id='stars'>
    <li class='star' title='Poor' data-value='1'>
      <i class='fa fa-star fa-fw'></i>
    </li>
    <li class='star' title='Fair' data-value='2'>
      <i class='fa fa-star fa-fw'></i>
    </li>
    <li class='star' title='Good' data-value='3'>
      <i class='fa fa-star fa-fw'></i>
    </li>
    <li class='star' title='Excellent' data-value='4'>
      <i class='fa fa-star fa-fw'></i>
    </li>
    <li class='star' title='WOW!!!' data-value='5'>
      <i class='fa fa-star fa-fw'></i>
    </li>
  </ul>
</div>

用于星形选择器的 jQuery

$(document).ready(function(){

  /* 1. Visualizing things on Hover - See next part for action on click */
  $('#stars li').on('mouseover', function(){
    var onStar = parseInt($(this).data('value'), 10); // The star currently mouse on

    // Now highlight all the stars that's not after the current hovered star
    $(this).parent().children('li.star').each(function(e){
      if (e < onStar) {
        $(this).addClass('hover');
      }
      else {
        $(this).removeClass('hover');
      }
    });

  }).on('mouseout', function(){
    $(this).parent().children('li.star').each(function(e){
      $(this).removeClass('hover');
    });
  });


  /* 2. Action to perform on click */
  $('#stars li').on('click', function(){
    var onStar = parseInt($(this).data('value'), 10); // The star currently selected
    var stars = $(this).parent().children('li.star');

    for (i = 0; i < stars.length; i++) {
      $(stars[i]).removeClass('selected');
    }

    for (i = 0; i < onStar; i++) {
      $(stars[i]).addClass('selected');
    }

    // JUST RESPONSE (Not needed)
    var ratingValue = parseInt($('#stars li.selected').last().data('value'), 10);
    var msg = "";
    if (ratingValue > 1) {
        msg = "Thanks! You rated this " + ratingValue + " stars.";
    }
    else {
        msg = "We will improve ourselves. You rated this " + ratingValue + " stars.";
    }
    responseMessage(msg);

  });


});

编辑后的表格 - 工作

<%= form_with model: @testomonial do |f| %>
  <div class="mb-3">
    <%= f.label :review, class: "label" %>
    <%= f.text_field :body, class: "form-control", placeholder: "Write review in here" %>
  </div>
  <div class="mb-3">
    <%= f.label :stars, class: "label" %>
    <%= f.hidden_field :star %>
    <!-- star selector: -->
    <div class='rating-stars text-center'>
      <ul id='stars'>
        <li class='star' data-value='1'>
          <i class='fa fa-star fa-fw'></i>
        </li>
        <li class='star' data-value='2'>
          <i class='fa fa-star fa-fw'></i>
        </li>
        <li class='star' data-value='3'>
          <i class='fa fa-star fa-fw'></i>
        </li>
        <li class='star' data-value='4'>
          <i class='fa fa-star fa-fw'></i>
        </li>
        <li class='star' data-value='5'>
          <i class='fa fa-star fa-fw'></i>
        </li>
      </ul>
    </div>
  </div>
  <div class="mb-3">
    <%= f.submit class: "btn btn-primary text-base py-1.5 px-5", value: "Post testomonial" %>
  </div>
<% end %>

使用星形选择器向表单输入值编辑 jQuery - 工作

$(document).ready(function(){
  /* 1. Visualizing things on Hover - See next part for action on click */
  $('#stars li').on('mouseover', function(){
    var onStar = parseInt($(this).data('value'), 10); // The star currently mouse on

    // Now highlight all the stars that's not after the current hovered star
    $(this).parent().children('li.star').each(function(e){
      if (e < onStar) {
        $(this).addClass('hover');
      }
      else {
        $(this).removeClass('hover');
      }
    });

  }).on('mouseout', function(){
    $(this).parent().children('li.star').each(function(e){
      $(this).removeClass('hover');
    });
  });
  /* 2. Action to perform on click */
  $('#stars li').on('click', function(){
    var onStar = parseInt($(this).data('value'), 10); // The star currently selected
    var stars = $(this).parent().children('li.star');

    for (i = 0; i < stars.length; i++) {
      $(stars[i]).removeClass('selected');
    }

    for (i = 0; i < onStar; i++) {
      $(stars[i]).addClass('selected');
    }

    // JUST RESPONSE (Not needed)
    var ratingValue = parseInt($('#stars li.selected').last().data('value'), 10);
    $("#testomonial_star").val(ratingValue);
  });
});
function responseMessage(msg) {
  $('.success-box').fadeIn(200);
  $('.success-box div.text-message').html("<span>" + msg + "</span>");
}

标签： javascriptjqueryruby-on-rails

Answer 1

当用户单击鼠标时，您可以将星值传递给输入 - rails 将为您在表单中的输入创建一个 id，我想在您的情况下是testomonial_star

/* 2. Action to perform on click */
  $('#stars li').on('click', function(){
    ... same code here

    // JUST RESPONSE (Not needed)
    var ratingValue = parseInt($('#stars li.selected').last().data('value'), 10);
    //Add rating to the form
    $("#testomonial_star").val(ratingValue)

    ... same code here

  });

我会将星级输入设置为隐藏<%= f.hidden_field :star %>，因为您已经查看了星级评分