多种选择，其中用javascript或jquery中的一个答案替换问题 [英] Multiple choice where questions are replaced with one answer in javascript or jquery
问题描述
有关此处讨论的代码的更新版本，请参见此 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:
<body>
<div class="default-text">
<div class="inlinechoice">
<a href="#" class="link" id="1">Choice 1</a>
<a href="#" class="link" id="2">Choice 2</a>
<a href="#" class="link" id="3">Choice 3</a>
</div>
</div>
<div class="about-1 hide">
<p>You picked 1</p>
</div>
<div class="about-2 hide">
<p>You picked 2</p>
</div>
<div class="about-3 hide">
<p>You picked 3</p>
</div>
这是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
使用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();
});
Edit: For an updated version of the code discussed here, see this codepen.
I have a code here on codepen which I adapted from another code here.
Basically when you click one of the 3 options, the list of questions disappears and is replaced with the answer.
Here is the 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');
});
Here is the html:
<body>
<div class="default-text">
<div class="inlinechoice">
<a href="#" class="link" id="1">Choice 1</a>
<a href="#" class="link" id="2">Choice 2</a>
<a href="#" class="link" id="3">Choice 3</a>
</div>
</div>
<div class="about-1 hide">
<p>You picked 1</p>
</div>
<div class="about-2 hide">
<p>You picked 2</p>
</div>
<div class="about-3 hide">
<p>You picked 3</p>
</div>
Here is the 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;
}
Currently the JS uses css to hide and unhide the relevant information, but I'm wondering if it's possible to have this all done via javascript and html, without requiring the css part and if so, where would be the best place to start?
The reason I'm interested is I'm looking to create a custom macro (which allows use of javascript and jquery) for the Twine interactive fiction system which would allow people to include choices which don't progress to additional nodes (not dissimilar to the *fake_choice command in Choicescript). Obviously my javascript knowledge isn't up to much, so whilst I've managed to get up to this point (admittedly more through a combination of Google/Stackoverflow and Codepen than actually knowing anything about javascript), some additional thoughts or advice would be much appreciated!
Edit: Following the answer from @RyanS, I've made the changes to my code and it's doing what I want it to, thanks for the help!
Codepen: http://codepen.io/anon/pen/HkCgG
Use the 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();
});
这篇关于多种选择，其中用javascript或jquery中的一个答案替换问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
