如何根据类别附加正确的详细信息？

Question

如果用户单击#challenge_category_goal ，则会显示for-goal的详细信息，如果用户单击#challenge_category_habit则会显示for-habit的详细信息。

    <%= f.radio_button :category, 'goal', class: 'date-format-switcher' %>
    <label for="challenge_category_goal">Goal</label>

    <%= f.radio_button :category, 'habit', class: 'date-format-switcher' %>
    <label for="challenge_category_habit">Habit</label>

    <div id='details'>  
      <div id='for-goal'>
        goal attributes
      </div>
      <div id='for-habit'>
        habit attributes
      </div>
    </div>

<script>
  var removed = $('#for-b').detach();
  $('#challenge_category_goal').click(function() {
    $('#details').append(removed);
    removed = $('#for-goal').detach();
  })

  $('#challenge_category_habit').click(function() {
    $('#details').append(removed);
    removed = $('#for-habit').detach();
  })
</script>

当表单首次加载时，会选择适当的类别（基于从用户选择特色挑战到后端传递的代码），但details不会根据页面加载而更改。 它们仅基于.click更改。 如何让 javascript 根据页面加载和.click显示正确的details ？

Answer 1

您可以尝试使用checked状态来确定show/hide状态：

<script>
function updateInfo(){
    if($('#challenge_category_goal').prop('checked')){
        $('#for-goal').show();
        $('#for-detail').hide();
    }else{
        $('#for-goal').hide();
        $('#for-detail').show();
    }
}

$(function() {
  $('#challenge_category_goal').click(updateInfo);
  $('#challenge_category_habit').click(updateInfo);
  updateInfo();
});
</script>

我还建议您检查这种纯CSS方法是否适合您的情况。

Answer 2

你的 javascript 应该是：

<script>
$(function() {
  $('#challenge_category_goal').click(function() {
    $('#for-goal').show();
    $('#for-detail').hide();
  });

  $('#challenge_category_habit').click(function() {
    $('#for-goal').hide();
    $('#for-detail').show();
  });

 // Update: To select challenge_category_goal in default
 $('#challenge_category_goal').click();
});
</script>

解释

1. 您的 javascript 必须包含在$(function() {}); ，因为事件将在文档准备好后附加！
2. 对于显示隐藏，只需使用 jquery show() , hide()函数，它们比像您所做的那样删除/附加更简单！

可选改进：使其通用：

<% %w( goal habit ).each do |category_name| %>
  <%= f.radio_button :category, category_name, class: 'date-format-switcher category-radio-btn', 'category-name' => category_name %>
  <label for="challenge_category_<%= category_name %>goal"><%= category_name.titleize %></label>
<% end %>

<div id='details'>
  <div id='for-goal' class='category-detail'>
    goal attributes
  </div>
  <div id='for-habit' class='category-detail'>
    habit attributes
  </div>
</div>

<script>
$(function() {
  $('.category-radio-btn').click(function() {
    $('#details .category-detail').hide();
    $('#for-' + $(this).attr('category-name')).show();
  });

  // Update: To select first radio button in default
  $('.category-radio-btn').first().click();
});
</script>

然后我们只需将呈现单选按钮的部分移动到查看助手，它会很漂亮并且以后添加/修改很容易！ 顺便说一句，在details元素中，我认为您会显示更多信息，我不知道它们有多复杂，所以我无法使其通用。

Answer 3

JSFiddle 示例： https ://jsfiddle.net/j7qg8op1/2/

正如@Hieu 提到的，只使用show和hide方法。 我会添加一些额外的帮手。

<script>
$(document).ready(function(){

  $('#challenge_category_goal').click(function() {
    $('#for-goal').show();
    $('#for-habit').hide();
  })

  $('#challenge_category_habit').click(function() {
    $('#for-goal').hide();
    $('#for-habit').show();
  })

})
</script>