Javascript闪存卡脚本如何让它切换？
Javascript闪存卡脚本如何让它切换？
提问于 2016-04-08 23:01:59
我调整了一个手风琴脚本，以获得一个轻闪存卡脚本。它满足了我的需要，唯一的问题是，当我按下项目看答案，然后点击下一步，它会显示下一个项目与答案。我试图让我的函数自动切换该项目，但它不起作用。这是我的页面
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function($) {
$('#accordion').find('#accordion-toggle').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
//$("#accordion-content").not($(this).next()).slideUp('fast');
});
});
</script>
<style>
#accordion-toggle {cursor: pointer; margin: 0; font-size:22; }
#accordion-content {display: none;font-size:22; }
#accordion-content.default {display: block;}
#accordion {align: center; text-align: center;}
</style>
</head>
<body>
<div id="accordion" >
<h3>Click on next or previous to see the idioms in English. Click on the
idiom to see the equivalent in French</h1>
<br>
<h4 id="accordion-toggle"></h4>
<div id="accordion-content">
<p></p>
</div>
<div align="center">
<br>
<button onclick="myFunctionNext()">Previous</button>
<button onclick="myPrevious()">Next</button>
</div>
<script>
var idioms = ["Once bitten twice shy", "Chat échaudé craint l'eau froide",
"Drive a hard bargain","Etre dur en affaires","To bone up","Bachoter","It
takes all sorts to make a world","Il faut de tout pour faire un monde",
"Chasing shadows", "Lacher la proie pour l'ombre", "To run out of
steam","Etre à bout de souffle"];
var a = 0;
function myFunctionNext() {
myVar="Hello world";
a=a+2;
if( a>idioms.length-1){
a=a-idioms.length;}
var idiomen = idioms[a];
var idiomfr = idioms[a+1];
document.getElementById("accordion-toggle").innerHTML = idiomen;
document.getElementById("accordion-content").innerHTML = idiomfr;
}
function myPrevious() {
a=a-2
if( a>idioms.length-1){
a=a-idioms.length;}
if( a<0){
a=a+idioms.length;}
var idiomen = idioms[a];
var idiomfr = idioms[a+1];
document.getElementById("accordion-toggle").innerHTML = idiomen;
document.getElementById("accordion-content").innerHTML = idiomfr;
}
</script>
</div>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-04-09 04:32:52
由于代码是未格式化的，所以很难阅读它。我敦促您开始使用缩进和空白；使您的代码更易读将使它更容易理解。
问题的解决方案是，您需要在每个slideUp和myPrevious单击处理程序中使用#accordion-content元素。为了使成语在内容折叠完成后发生变化，您应该将现有的函数体放在一个回调到slideUp中。其结果将是：
function myFunctionNext () {
$('#accordion-content').slideUp(function () {
// existing myFunctionNext body goes here.
});
}
function myPrevious () {
$('#accordion-content').slideUp(function () {
// existing myPrevious body goes here.
});
}既然我们已经开始工作了，我们就可以把精力放在重构上了。我认为你的代码可以改进很多。
我们可以通过给我们的变量取更好的名字来帮助自己。"a“是索引的糟糕名称；我们的方法不应该以"my”作为前缀。为了提高效率，我们可以缓存#accordion-toggle和#accordion-content元素。最后，让我们拆分我们的方法，并给它们提供描述性的名称，以帮助阐明我们的代码正在做什么。
重构后的JavaScript将是：
var idioms = [
"Once bitten twice shy",
"Chat échaudé craint l'eau froide",
"Drive a hard bargain",
"Etre dur en affaires",
"To bone up","Bachoter",
"It takes all sorts to make a world",
"Il faut de tout pour faire un monde",
"Chasing shadows",
"Lacher la proie pour l'ombre",
"To run out of steam",
"Etre à bout de souffle"
];
var index = 0;
var increment = 2;
var $accordion_toggle = $('#accordion-toggle');
var $accordion_content = $('#accordion-content');
function incrementIndex () {
index += increment;
if (index >= idioms.length) {
index = 0;
}
}
function decrementIndex () {
index -= increment;
if (index < 0) {
index = (idioms.length - increment);
}
}
function updateIdioms () {
$accordion_toggle.html(idioms[index]);
$accordion_content.html(idioms[index + 1]);
}
function onNextClick () {
$accordion_content.slideUp(function () {
incrementIndex();
updateIdioms();
});
}
function onPreviousClick () {
$accordion_content.slideUp(function () {
decrementIndex();
updateIdioms();
});
}
$(function () {
updateIdioms();
$('#Next').click(onNextClick);
$('#Previous').click(onPreviousClick);
$accordion_toggle.click(function () {
$accordion_content.slideToggle('fast');
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36510663
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号