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显示正确details; .click？

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>

<强>解释

您的javascript必须包含在$(function() {});中，因为事件将在文档准备好后附加！
对于show hide，只需使用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提到的那样只使用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>方法。我会添加一些额外的助手。

//some code
if (name.compareTo(student.name) == -1) {
    return findNode(student.getLeft(), name);
}
//some code

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

3 个答案: