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

Question

如果用户点击#challenge_category_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>

当表单首次加载时，会选择适当的类别(基于用户选择特色挑战时在后端传递的代码)，但详细信息不会更改基于页面加载。它们仅根据 .click 进行更改。如何使 javascript 根据页面加载和 .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方法适合您的情况。