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

如果用户单击

#挑战#类别(目标

上的，则会显示目标的详细信息；如果用户单击

#挑战#类别(习惯

，则会显示习惯的详细信息

    <%= 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>

目标
习性
目标属性
习惯属性
var removed=$（“#for-b”）.detach（）；
$（“#挑战(类别)目标”）。单击（函数（）{
$（“#详细信息”）。追加（删除）；
删除=$（“#用于目标”）.detach（）；
})
$（“#挑战_类别_习惯”）。单击（函数（）{
$（“#详细信息”）。追加（删除）；
已删除=$（“#用于习惯”）.detach（）；
})

---

当表单首次加载时会选择适当的类别（基于从选择特色挑战的用户在后端传递的代码），但

详细信息

不会根据页面加载而更改。它们仅根据

进行更改。单击
。如何使javascript基于页面加载显示正确的
详细信息
。单击
？
您的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>

然后我们只需将渲染单选按钮的部分移动到view helper，它将非常漂亮，并且易于以后添加/修改！顺便说一句，在
details
元素中，我想您会显示更多的信息，我不知道它们有多复杂，所以我无法将其通用化。
jsiddle示例：

正如@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>


$（文档）.ready（函数（）{
$（“#挑战(类别)目标”）。单击（函数（）{
$（“#表示目标”）.show（）；
$（“#表示习惯”）.hide（）；
})
$（“#挑战_类别_习惯”）。单击（函数（）{
$（“#表示目标”）.hide（）；
$（“#表示习惯”）.show（）；
})
})
您可以尝试使用
选中状态来确定
显示/隐藏状态：

<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>


函数updateInfo（）{
如果（$（'#挑战#类别(目标））.prop（'checked'））{
$（“#表示目标”）.show（）；
$（“#详细信息”）.hide（）；
}否则{
$（“#表示目标”）.hide（）；
$（“#详细信息”）.show（）；
}
}
$（函数（）{
$（“#挑战(类别)目标”）。单击（更新信息）；
$（“#挑战(类别)习惯”）。单击（更新信息）；
updateInfo（）；
});

我还建议你检查一下这个纯方法是否适合你的情况
 我试过了。我没法让它工作。例如，当我现在加载页面时，它会同时显示目标的
和习惯的
中的所有内容，而不是一个或另一个。如果我点击另一个类别，尽管它正确地显示了一个或另一个。我也像这样尝试过，
$（'challenge#u category_goal'）。点击（函数（）{$（'for goal'）。显示（）；$（'for habity'）。隐藏（）}$（'challenge#u category_habity'）。点击（函数（）{$（'for goal'）。隐藏（）；$（'for habity'）。显示（））
@AnthonyGalli.com只是一个小的更新，请查看：）好的，先生，把它全部插上。在加载类别为
habity
的页面时，我看到出于某种原因，它默认为
goal
，并且它显示了goal
的
和habity
属性的
。如果我尝试手动更改类别，则不会更改。您是否尝试了
可选改进
？我刚刚更新了它，抱歉，我在jquery选择器中丢失了一个点，太蹩脚了：（不使用turbolinks。当页面加载时，您的代码会隐藏这两个。要显示其中一个，用户必须手动单击类别，即使该类别已被选中。是否有
的替代方法。单击
，因为我认为这是罪魁祸首。@AnthonyGalli.com OMG，然后让它像这样显示->
$（“#为目标”）.show（）
，默认情况下html将选择第一个单选按钮。我还附加了JSFIDLE中的简单示例。它不是默认的。我不希望用户必须单击。它应该在页面加载后自动默认为目标
或习惯
的相应类别。有时页面将加载类别de>目标
预选，有时加载的类别将是
习惯
这取决于用户选择了哪个特色挑战。@AnthonyGalli.com更新了我的帖子，只需为你的目标单选按钮添加
选中：真
。我不想选中
真
。这与目的背道而驰。Ruby通过了catego因此，有时
类别
将作为
习惯
传递，有时
目标
传递。请检查此项：
https://jsfiddle.net/j7qg8op1/2/
没有。感谢您再试一次。当一个特色挑战传递给习惯时。习惯类别已被选中，但它显示了目标@7urkm3的属性。非常感谢！小心这是拼图的最后一块。FML实际上隐藏的数据属性仍在传递中。你知道如何修复吗？
<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>