使用Javascript/JQuery设置Rails`hidden_field_tag`Value

我正试图使用javascript或jquery让我的应用程序识别出哪个div的类为active，作为我的erb form_for中hidden_field_tag的值。到目前为止，我已经建立并运行了以下结构：

<div id="q1" class="row gen-quest-div">
    <h1>How long do you have?</h1>
    <div class="row answers">
      <div id="q1-15" class="answerswer q1-answer col-xs-6 col-sm-3">
        <%= image_tag 'min-15.jpg', alt: "Put 15 minutes on the clock!" %>
        <p>15 Minutes</p>
      </div>
      <div id="q1-30" class="answerswer q1-answer col-xs-6 col-sm-3">
        <%= image_tag 'min-30.jpg', alt: "Put 30 minutes on the clock!" %>
        <p>30 Minutes</p>
      </div>
      <div id="q1-45" class="answerswer q1-answer col-xs-6 col-sm-3">
        <%= image_tag 'min-45.jpg', alt: "Put 45 minutes on the clock!" %>
        <p>45 Minutes</p>
      </div>
      <div id="q1-60" class="answerswer q1-answer col-xs-6 col-sm-3">
        <%= image_tag 'min-60.jpg', alt: "Put 60 minutes on the clock!" %>
        <p>60 Minutes</p>
      </div>
    </div> <!-- answers row -->
  </div> <!-- question div -->
<div class="btn-primary" id="pre-submit">Pre Submit</div>
<script>
// Selection handling
  $( document ).ready(function() {
      $('.q1-answer').on('click', function() {
        $('.q1-answer').removeClass('active');
        $(this).toggleClass('active');
      });
      $('.q2-answer').on('click', function() {
        $('.q2-answer').removeClass('active');
        $(this).toggleClass('active');
      });
      $('.q3-answer').on('click', function() {
        $('.q3-answer').removeClass('active');
        $(this).toggleClass('active');
      });
  });
  // Form handling
  $('#pre-submit').on('click', function() {
    if ($('#q1-15').hasClass('active')) {
        console.log("So far this works.");  // <<<<THIS LINE
      }
  }); 
</script>

这成功地选择了一个div，点击时将其标记为.active，并在选择答案时打印console.log语句(仅用于测试目的…(。现在的难点是用什么来替换标记线，以使表单识别答案。我的表格结构如下：

  <%= form_for @generator do |f| %>
      <div id="q1-form-field">
        <%= hidden_field_tag :time, id: "q1-hf" %>
      </div>
      ...
      <div class="text-center">
        <h3><%= f.submit "Submit" %></h3>
      </div>
  <% end %>

当不采取任何操作时，隐藏字段将转换为html中的<input type="hidden" name="time" id="time" value="{:id=>&quot;q1-hf&quot;}">，这可能是问题，也可能不是问题。

并尝试了几种方法来替换javascript中的console.log语句，并为隐藏字段分配一个值，在此基础上div就是.active。

首先，document.getElementById("q1-hf").value = 1;接收到控制台错误，称为new:200 Uncaught TypeError: Cannot set property 'value' of null

或者，$('#q1-hf').val(1);不会生成控制台错误，但也不会更改hidden_field_tag的值。

有人能帮我把这件事做好吗？我对实现同样目标的其他结构持开放态度，但我看过其他类似这样或这样的帖子，这些帖子似乎认为这应该是可能的。