多个选项，用javascript或jquery中的一个答案替换问题

编辑：有关此处讨论的代码的更新版本，请参阅此codepen 。

我在codepen上有一个代码，我在这里改编自另一个代码。

基本上，当您单击3个选项中的一个时，问题列表将消失并替换为答案。

这是javascript：

$('.inlinechoice').on('click','.link', function(e) { var $this = $(this), $id = $this.prop('id'), $class = '.' + $('.about-' + $id).prop('class').replace('hide', ''); $('.default-text').addClass('hide'); $('.about-' + $id).removeClass('hide'); $('div[class*=about]').not($class).addClass('hide'); }); 

这是html：

   
 
 Choice 1 Choice 2 Choice 3 
 
 
 
You picked 1
 
 
 
You picked 2
 
 
 
You picked 3
  

这是css：

  * { margin:0;padding:0; } body { background:#E9EEF5; } .default-text { font:20pt 'Georgia'; height:50px; width:674px; margin:20px auto 0; text-align:center; } div { margin:20px auto 0; text-align:center; width: 674px; } .hide { display: none; } 

目前JS使用css隐藏和取消隐藏相关信息，但我想知道是否可以通过javascript和html完成所有这些，而不需要css部分，如果是这样，哪里是最好的起点？

我感兴趣的原因是我正在寻找为Twine交互式小说系统创建一个自定义宏（允许使用javascript和jquery），这将允许人们包括不进展到其他节点的选择（与Choicescript中的* fake_choice命令 ）。 显然我的javascript知识不是很多，所以虽然我已经设法达到这一点（不可否认，通过Google / Stackoverflow和Codepen的组合而不是实际了解javascript的任何内容），一些额外的想法或建议将是非常感激！

编辑：根据@RyanS的回答，我已对代码进行了更改，并且正在按照我的意愿进行操作，感谢您的帮助！

Codepen： http ：//codepen.io/anon/pen/HkCgG

Answer 1

使用jQuery show / hide：

 $('.inlinechoice').on('click','.link', function(e) { var $this = $(this), $id = $this.prop('id'), $class = '.' + $('.about-' + $id).prop('class').replace('hide', ''); $('.default-text').hide(); $('.about-' + $id).show(); $('div[class*=about]').not($class).hide(); });